jQuery验证插件 form 验证

原创 2012年03月30日 22:03:37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册表单验证</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jquery/reg/css/screen.css" />

<script src="../jquery/reg/js/jquery.js" type="text/javascript"></script>
<script src="../jquery/reg/js/jquery.validate.js" type="text/javascript"></script>

<script>

$.validator.setDefaults({
    submitHandler: function(form) {
    alert("submitted!");
    form.submit();
     }
});

$().ready(function (){
    
    //自行定义的验证方法
    jQuery.validator.addMethod("cardValidate",function(value, element, param) {
        //获取用户输入的值,判断是否为空
            if(value==""){
              return false;    
            }
        
        return true;
        }
    );
    
    
    //自行定义的验证方法
    jQuery.validator.addMethod("cardLength",function(value, element, param) {
        //获取用户输入的值,长度是否等于15或者是18
             
            if(value.length!=15&&value.length!=18){
              alert(value.length);
              return false;    
            }
        
           return true;
        }
    );
    
    
    
    
   $("#form1").validate({
       rules:{
                username:{
                  required:true,
                  minlength:6
                },
                user:{
                  required:true,
                  rangelength:[5,8]//将长度控制在一段长度
                },
                password:{
                  required:true,
                  rangelength:[6,12]
                  
                },
                repassword:{
                  required:true,
                  rangelength:[6,12],
                  equalTo:"#password"    //判断是否重复输入密码正确      
                },
                sex:{
                  required:true,
                  minlength:1
                  
                },
                year:{
                  required:true,
                  range:[26,50]
                  
                },
                date:{
                   required:true,
                  dateISO:true
                  
                },
                email:{
                    required:true,
                    email:true
                },
                card:{
                  cardValidate:true,
                  rangelength:[15,18]
                }
                
       
       },
       messages:{
           
           username:{
              required:"用户名不能为空!",
              minlength:"用户名长度不能小于6位"
            },
            user:{
              required:"密码不能为空!",
              rangelength:"登录名空,长度应该在5~8之间,可包含中文字符(一个汉字算一个字符)"              
            },
            password:{
              required:"密码不能为空!",
              rangelength:"密码长度在6~12字符或数字,不能包含中文字符"              
            },
            repassword:{
              required:"密码不能为空!",
              rangelength:"密码长度在6~12字符或数字,不能包含中文字符",
              equalTo:"密码和重复密码内容不一致"
                  
            },
            sex:{
              required:"用户名不能为空!",
              minlength:"请选择性别"
            },
            year:{
              required:"用户名不能为空!",
              range:"员工的年龄只能在26~50之间"
            },
            date:{
              required:"出生日期不能为空!",
              dateISO:"请写入正确的日期格式"    
            },
            email:{
                required:"邮箱不能为空!",
                email:"请输入正确的邮箱格式"
            },
            card:{
              cardValidate:"身份证号不能为空!",
              rangelength:"身份证的长度15~18"
            }
            
           
         }
       
       
    });
    
});



</script>
</head>

<body>
<hr />
<form id="form1" action="" method="post">
员工信息录入
<hr />
<center>
<table border="1" bordercolor="#0033FF" >
<tr><td>
真实姓名(不能为空,没有其他要求):</td><td><input type="text" name="username" id="username" /></td></tr>
<tr><td>

登录名(登录名不能为空,长度应该在5~8之间,可包含中文字符(一个汉字算一个字符)):</td><td><input type="text" name="user" id="user" /></td></tr>
<tr><td>

密码(不能为空,长度在6~12字符或数字,不能包含中文字符):</td><td><input type="password" name="password" id="password" /></td></tr>
<tr><td>
重复密码(密码不能为空,长度在6~12字符或数字,不能包含中文字符):rangelength:[6,12]</td><td><input type="password" name="repassword" id="repassword" /><br>
</td></tr>
<tr><td>
性别(必选其一):</td><td><input type="radio" name="sex" id="sex"  value="man" />男
<input type="radio" name="sex" id="sex"  value="women" />女</td></tr>
<tr><td>年龄(必填 26~50)range:[26,50]</td><td><input type="text" id="year"  name="year"/></td></tr>
<tr><td>
你的学历:</td><td>
<select>
  <option>--请选择你的学历--</option>
  <option> 经济管理</option>
  <option>市场调查</option>
  <option>紧急策划</option>
  <option>市场营销</option>
  <option>外形设计</option>
</select>
</td></tr>

<tr><td>出生日期(1982/09/21):</td><td><input type="text" id="date"  name="date" /></td></tr>
<tr><td>兴趣爱好:</td><td>
<input type="checkbox" id="pingpang"  name="like"/>乒乓球
<input type="checkbox" id="yumao"  name="like"/>羽毛球
<input type="checkbox" id="shangwang"  name="like"/>上网
<input type="checkbox" id="lvyou"  name="like"/>旅游
<input type="checkbox" id="gouwu"  name="like"/>购物

</td></tr>
<tr><td>电子邮箱:email:true</td><td><input type="text" id="email"  name="email"/></td></tr>
<tr><td>身份证(15~18):</td><td><input type="text" id="card"  name="card" /></td></tr>
<tr><td></td><td style="float:right">
<input type="submit" value="保存" />
</td></tr></table></center>
</form>
</body>
</html>




表单实时校验插件——jquery.validateForm.js(v.2.0)

插件名:jquery.validateForm.js 依赖:  jquery ,  jquery.validateForm.css 参数: 暂无参数(有一个默认的msg提示) 说明: 实现了input...
  • vuturn
  • vuturn
  • 2015年12月31日 16:08
  • 2014

自己动手丰衣足食之Easyform表单验证插件&validate.js实时验证

下载地址:http://download.csdn.net/detail/cometwo/9437671 Easyform表单验证插件实现简易注册表单验...
  • cometwo
  • cometwo
  • 2016年02月20日 17:01
  • 3609

使用jQuery validate插件验证表单

使用JQuery validate插件验证表单
  • sinat_19833881
  • sinat_19833881
  • 2017年02月28日 17:06
  • 1058

利用Jquery实现一个典型的form表单前端验证

前端验证有各种插件,也有各种实现方式,可谓八仙过海,各显神通,几乎看到的每个人的验证方式都有所区别,本例仅作示例,做到html、css、js的解耦合,又兼顾移开光标就显示错误信息的用户体验。 注:本例...
  • bboyjoe
  • bboyjoe
  • 2016年07月03日 02:57
  • 3558

jquery validate和jquery form 插件组合实现验证表单后AJAX提交

title 1.目前贵公司服务器规模有多少? 2.贵公司IT架构对云计算的使用现状是? A. 完全传统IT架构 B. 已经使用虚拟化 C. 已经开始云的使...
  • vm021
  • vm021
  • 2016年04月08日 11:41
  • 731

使用 纯JQuery 进行 表单 验证

对于JavaScript而言,进行表单数据的验证可谓是很有必要的,而且一般我们都会在网页上先进行一下表单验证,然后服务器端再次进行验证,来确保用户提交数据的准确性。下面就来分享一个JQuery实现的表...
  • Marksinoberg
  • Marksinoberg
  • 2016年07月27日 11:18
  • 6909

jquery UI学习笔记-知问前端之验证表单插件

效果图:
  • chenchudongsg
  • chenchudongsg
  • 2014年10月29日 16:47
  • 1383

jQuery-Validate验证插件的使用步骤详解

我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改。   记得以...
  • eson_15
  • eson_15
  • 2016年05月25日 23:41
  • 44511

Jquery 实现表单验证,所有验证通过方可提交

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2...
  • yang_ai
  • yang_ai
  • 2016年07月31日 14:46
  • 1753

jquery,form表单验证后提交

引入的js包: 为表单设置验证规则: jQuery(document).ready(function(){ jQuery("#theForm").validate({ errorPlac...
  • qq_30679953
  • qq_30679953
  • 2016年08月19日 18:10
  • 1028
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery验证插件 form 验证
举报原因:
原因补充:

(最多只允许输入30个字)