當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery表单验证的几种方法

發布時間：2023/12/2 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>

總結

以上是生活随笔為你收集整理的jQuery表单验证的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。