jQuery表单验证的几种方法
生活随笔
收集整理的這篇文章主要介紹了
jQuery表单验证的几种方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.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 就是這個唯一的參數,如果多個參數,用在[]里,用逗號分開
第二種就是js的blur事件寫的驗證：
<!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> </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>
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的jQuery表单验证的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Json Schema的使用
- 下一篇： 会话跟踪之Session