JqueryValidate验证的介绍以及jQuery表单验证的代码实例

来源：动视网责编：小采时间：2020-11-27 19:32:22

JqueryValidate验证的介绍以及jQuery表单验证的代码实例

JqueryValidate验证的介绍以及jQuery表单验证的代码实例:本篇文章给大家带来的内容是关于Jquery Validate验证的介绍以及jQuery表单验证的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。jQuery的框架的验证：validate框架Jquery Validate验证规则(1)required:true 必

推荐度：

点击下载本文 文档为doc格式

导读JqueryValidate验证的介绍以及jQuery表单验证的代码实例:本篇文章给大家带来的内容是关于Jquery Validate验证的介绍以及jQuery表单验证的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。jQuery的框架的验证：validate框架Jquery Validate验证规则(1)required:true 必

本篇文章给大家带来的内容是关于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>

JqueryValidate验证的介绍以及jQuery表单验证的代码实例

推荐度：

点击下载本文 文档为doc格式

标签：验证介绍代码

热门焦点

JqueryValidate验证的介绍以及jQuery表单验证的代码实例

JqueryValidate验证的介绍以及jQuery表单验证的代码实例

JqueryValidate验证的介绍以及jQuery表单验证的代码实例

最新推荐

猜你喜欢

热门推荐