当前位置：首页 > news >正文

jQuery表单验证的几种方法

news 2025/6/6 10:04:00

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 就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开

<!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>

第二种就是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 > 