jquery插件validation
validation插件用于基本的验证
![](//img-blog.csdn.net/20130507204639293)
个人写的实例
从上到下的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}
- },
个人写的实例
<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>