本篇文章给大家带来的内容是关于Jquery Validate验证的介绍以及jQuery表单验证的代码实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
jQuery的框架的验证:validate框架
Jquery Validate验证规则
(1)required:true 必输字段
(2)remote:”check.PHP” 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:”#field” 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
Jquery Validate 自定义验证规则
addMethod(name,method,message)方法:
参数name 是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param
是参数,我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法比如有一个字段,只
能输一个字母,范围是a-f,写法如下:
$.validator.addMethod(“af”,function(value,element,params){ if(value.length>1){ return false; } if(value>=params[0] && value<=params[1]){ return true; }else{ return false; } },”必须是一个字母,且a-f”); 用的时候,比如有个表单字段的id=”username”,则在rules 中写 username:{ af:["a","f"] }
方法
addMethod 的第一个参数,就是添加的验证方法的名子,这时是af
addMethod 的第三个参数,就是自定义的错误提示,这里的提示为:”必须是一个字母,且a-f”
addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法
如果只有一个参数,直接写,如果af:”a”,那么a 就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .error{ color: red; } </style> <script src="js/jquery.min.js"></script> <!-- 导入的框架 --> <script src="js/jquery.validate.min.js"></script> <script> $(function(){ $('#a').validate({ rules:{ username:{ required:true }, password_1:{ required:true, rangelength:[5,10], }, password_2:{ required:true, equalTo:'#pa' }, sex:{ required:true }, you:{ required:true, email:true }, }, messages:{ username:{ required:'字段不能为空' }, password_1:{ required:'字段不能为空', rangelength:'密码长度要在5到10位', }, password_2:{ required:'字段不能为空', equalTo:'两次密码不一样' }, sex:{ required:'性别不能为空', }, you:{ required:'邮箱不能为空', email:'邮箱格式不对' } } }) }) </script> </head> <body> <form action="a.jsp" method="post" id="a"> 请输入姓名:<input type="text" name="username" ><br> 请输入密码: <input type="password" name="password_1" id="pa"><br> 确认密码: <input type="password" name="password_2" ><br> 性别: <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 <label for="sex" generated="true"></label><br> 邮箱: <input type="text" name="you" ><br> <input type="submit" value="submit"> </form> </body> </html>
第二种就是js的blur事件写的表单验证:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> /* form{ margin-left:400px; } */ </style> <script src="js/jquery.min.js"></script> <script> $(function () { var a = b = c = d = e = f = g = false; $("#tables").css({ "border": '1px solid blue', 'text-align': 'center' }).css("width", "800").css("height", "400px") $('td').css({ "border": "1px solid blue" }) $("#td1").css({ 'width': '100' }) $("#td2").css({ "width": "400" }) $("#td3").css({ "width": "300" }) // 设置id a的颜色 $('span').css('color', 'red') //登录名的验证 $("input[name='username']").blur(function () { var va = $(this).val(); var char = va.charCodeAt(0); //alert(va); if (va == "") { a = false; // $(this).click(function(){ // $('#a').css('background','blue').css('width','100px') // }) $('#a').html(function () { return "值不能为空"; }) } else if (va.length < 6) { a = false; $('#a').html('登录名不能少于6个字') } else if (!((char >= 65 && char <= 90) || (char >= 97 && char <= 122))) { a = false; $('#a').html('登录名的首字母只能为字母') } else { a = true; $('#a').html(function () { return ''; }) } }) //验证姓氏 $("input[name='xing']").blur(function () { var xing = $(this).val(); if (xing == '') { b = false; $('#b').html('值不能为空') } else if(xing.length>6){ b=false; $('#b').html('你的姓氏不符合要求,字符长度超过6') } else{ b=true; $('#b').html(function(){ return ''; }) } }) //验证密码 $('#password_1').blur(function(){ var va=$('#password_1').val(); if(va==''){ c=false; $('#c').html('密码不能为空') } else if(va.length<8){ c=false; $('#c').html('你的密码不足8位数不符合要求') } else{ c=true; $('#c').html(''); } }) //密码重复验证 $('#password_2').blur(function(){ //拿到本身的密码 var va1=$(this).val(); //拿到之前的密码 var va2=$('#password_1').val(); if(va1==''){ d=false; $('#d').html('密码不能为空') } else if(va1!=va2){ d=false; $('#d').html('两次密码不正确') } else{ d=true; $('#d').html('') } }) //性别选择直接选中下下标为1的 $('input[name=sex]:eq(1)').prop('checked','checked') $('input[name=sex]').blur(function(){ }) //年验证 $('#year').blur(function(){ //拿到年的值 var va=$(this).val(); // var v=Number(va); //alert(va) var s=/^[0-9]+$/; if(va==''){ f=false; $('#f').hmtl('年不能为空') } // else if(!s.test(va)){ // f=false; // $('#f').hmtl('年只能是数字') // } else if(isNaN(va)){ f=false; $('#f').html('年只能是数字') } else if(va.length!=4){ f=false; $('#f').html('值必须为4位数') } else{ f=true; $('#f').html('') } }) //天数验证 $("input[name='day']").blur(function(){ var va=$(this).val(); var t = /^(([1-9])|((1|2)[0-9])|30|31)$/; if(va===''){ g=false; $('#f').html('天数不能为空') } else if(! t.test(va)){ g=false; $('#f').html('对不起,天数必须在 1-31 之间!') }else{ g=true; $('#f').html('') } }) $('#su').click(function(){ return a&&b&&c&&d&&f&&g }) }) </script> <body> <form action="s"> <table id="tables"> <tr> <td colspan="3"> <img src="images/d.png" alt=""> </td> </tr> <tr> <td id="td1">登录名</td> <td id="td2"> <input id="input1" type="text" name="username"> </td> <td id="td3"> <span id="a"></span> </td> </tr> <tr> <td>姓氏</td> <td> <input type="text" name="xing"> </td> <td> <span id="b"></span> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" id="password_1"> </td> <td> <span id="c"></span> </td> </tr> <tr> <td>再次输入密码</td> <td> <input type="password" name="password" id="password_2"> </td> <td> <span id="d"></span> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女">女 </td> <td> <span id="e"></span> </td> </tr> <tr> <td>生日</td> <td> <input type="text" name="year" id="year"> <select name="month" id="select_1"> <option value="一月" selected>一月</option> <option value="二月">二月</option> <option value="三月">三月</option> </select> <input type="text" name="day"> </td> <td> <span id="f"></span> </td> </tr> <tr> <td colspan="3"> <input type="reset" value="reset"> </td> </tr> <tr> <td colspan="3"> <input type="submit" value="提交" id="su"> </td> </tr> </table> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .error{ color: red; } </style> <script src="js/jquery.min.js"></script> <!-- 导入的框架 --> <script src="js/jquery.validate.min.js"></script> <script> $(function(){ $('#a').validate({ rules:{ username:{ required:true }, password_1:{ required:true, rangelength:[5,10], }, password_2:{ required:true, equalTo:'#pa' }, sex:{ required:true }, you:{ required:true, email:true }, }, messages:{ username:{ required:'字段不能为空' }, password_1:{ required:'字段不能为空', rangelength:'密码长度要在5到10位', }, password_2:{ required:'字段不能为空', equalTo:'两次密码不一样' }, sex:{ required:'性别不能为空', }, you:{ required:'邮箱不能为空', email:'邮箱格式不对' } } }) }) </script> </head> <body> <form action="a.jsp" method="post" id="a"> 请输入姓名:<input type="text" name="username" ><br> 请输入密码: <input type="password" name="password_1" id="pa"><br> 确认密码: <input type="password" name="password_2" ><br> 性别: <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 <label for="sex" generated="true" class="error"></label><br> 邮箱: <input type="text" name="you" ><br> <input type="submit" value="submit"> </form> </body> </html>
相关推荐:
以上是Jquery Validate验证的介绍以及jQuery表单验证的代码实例的详细内容。更多信息请关注PHP中文网其他相关文章!