jquery插件validation

最新推荐文章于 2024-09-14 16:44:21 发布

原创最新推荐文章于 2024-09-14 16:44:21 发布 · 848 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

JQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用 jQuery 验证插件进行表单验证，包括安装、配置及常见验证规则的应用。通过实例展示了必填项、邮箱格式、密码强度等多种验证方式。

validation插件用于基本的验证

从上到下的3个引用，分别为 jquery本体的引用，jquery-validation的引用，jquery-validation的错误提示的引用。

如autocomplete插件一样吧validation插件引进项目后我们回发现多出一个validate方法。

语法

$('form').validate({ rules: {}，errorshow: function (error,element){} })

参数？	描述
rules	返回元素的验证规则。具体有哪些规则和规则的定义向下看。
errorshow	返回验证不通过是提示的语句。errorshow可以修改
error	验证不通过时，返货的错误信息
element	被验证的元素

注：由于validate方法只能验证form元素

但是我们要验证的是input元素啊，所以我们只能把要验证input元素发到form中。然后我们在说rules验证规则该如何写。

注：下面所写的username mail 等全部为input元素的name属性

元素name：{验证规则，验证规则...}

rules: {
userName: { required: true, minlength: 7 },
mail: { required: true, email: true },
passWord: { required: true, minlength: 6, maxlength: 6 },
enterpassWord: { required: true, equalTo: password },
homepage: { required: true, url: true },
birthday: { required: true, date: true },
xueya: {digits: true}
},

更多的验证规则可以查看错误信息的.js文件。注：equalTo 验证 B是否与A相同则需要为A设置id属性

个人写的实例

<head>
    <title></title>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script src="jquery-validation-1.9.0/jquery.validate.js" type="text/javascript"></script>
    <script src="jquery-validation-1.9.0/localization/messages_cn.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#form1').validate({
                rules: {
                    userName: { required: true, minlength: 7 },
                    mail: { required: true, email: true },
                    passWord: { required: true, minlength: 6, maxlength: 6 },
                    enterpassWord: { required: true, equalTo: password },
                    homepage: { required: true, url: true },
                    birthday: { required: true, date: true },   
                    xueya: {digits:true}
                },
                errorshow: function (error, element) {
                    error.appendTo(element.siblings('span'))
                }
            })
        })
    </script>
</head>
<body>
<form id='form1'>
 <table>
  <tr>
   <td>用户名</td><td><input type="text" name='userName' /></td><td>*</td>
  </tr>
  <tr>
   <td>E-mail</td><td><input type="text" name='mail' /></td><td>*</td>
  </tr>
  <tr>
   <td>密码</td><td><input type="text" name='passWord' id='password'/></td><td>*</td>
  </tr>
  <tr>
   <td>确认密码</td><td><input type="text" name='enterpassWord' /></td><td>*</td>
  </tr>
  <tr>
   <td>主页</td><td><input type="text" name='homepage' /></td><td>*</td>
  </tr>
  <tr>
   <td>生日</td><td><input type="text" name='birthday' /></td><td>*</td>
  </tr>
  <tr>
   <td>血压 </td><td><input type="text" name='xueya' /></td><td>*</td>
  </tr>
 </table>
</form>
</body>