jQuery验证插件
<!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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。