使用JQuery.Validate插件来校验页面表单有效性
1. [代码] 常见的注册表单元素
<form action="#" method="post" id="regist">
<table cellpadding="0" cellspacing="0" border="0" class="form_table">
<tr>
<td valign="middle" align="right">用户名:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="username" id="username" /> </td>
</tr>
<tr>
<td valign="middle" align="right">真实姓名:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="name" /> </td>
</tr>
<tr>
<td valign="middle" align="right">密码:</td>
<td valign="middle" align="left"> <input type="password" class="inputgri" name="pwd" id="pwd"/> </td>
</tr>
<tr>
<td valign="middle" align="right">重复密码:</td>
<td valign="middle" align="left"> <input type="password" class="inputgri" name="repwd"/> </td>
</tr>
<tr>
<td valign="middle" align="right">年龄:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="age" /> </td>
</tr>
<tr>
<td valign="middle" align="right">电话:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="phone" /> </td>
</tr>
<tr>
<td valign="middle" align="right">电子邮件:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="email" /> </td>
</tr>
<tr>
<td valign="middle" align="right">验证码:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="number" /> </td>
</tr>
</table>
<p> <input type="submit" class="button" value="Submit »" /> <input type ="reset" class = "button" value = "Reset »"> </p>
</form>
2. [代码]HTML头部引入需要的函数库
<head>
<title>欢迎注册</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script>
</head>http://www.huiyi8.com/flashjc/
3. [代码]表单校验代码
<script type="text/javascript">
//表单填写情况校验
$(function(){ //代表页面加载以后执行
$("#regist").validate( //此处的#regist是JQuery的选择器，代表了校验id为regist的Form
{ flash教程
rules: {//此处开始配置校验规则，下面会列出所有的校验规则
username : "required",
name : "required",
pwd : {required:true,rangelength:[6,10]},
repwd : {required:true,equalTo:"#pwd"}, //需要和id=pwd元素对应
age : {required:true,rangelength:[1,2]},
phone:{required:true,rangelength:[5,20]},
number:{required:true,},
email: {required:true,email: true,},
},
messages:{//自定义提示信息
name:{required:"真实姓名不能为空!"},
pwd:{required:"密码不能为空!",rangelength:"密码必须在6-10位!"},
email:{required:"电子邮箱不能为空!"},
}
}
);
});
</script>