6.Jquery客户端验证使用方式
在head部分引入
<script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
使用方式
<script type="text/javascript" language="javascript">
$("#form1").validate({
rules:
{
"userName":
{
required: true,
minlength: 5
},
"pwd":
{
required: true,
minlength: 1,
number: true
},
"confirmPwd":
{
required: true,
number: true,
minlength: 1,
equalTo: "#pwd"
},
"age":
{
required: true,
rangelength: [1, 3],
number:true
},
"birthdate":
{
dateISO: true
},
"email":
{
email:true
},
"mainPage":
{
url:true
}
},
messages:
{
"userName":
{
required: "<strong style='color:red'>请输入用户名</strong>",
minlength: "<strong style='color:red'>请输入至少5个字符</strong>"
},
"pwd":
{
required: "<strong style='color:red'>请输入密码</strong>",
minlength: "<strong style='color:red'>请输入至少5个字符</strong>",
number: "<strong style='color:red'>请输入数字</strong>"
},
"confirmPwd":
{
required: "<strong style='color:red'>请输入确认密码</strong>",
minlength: "<strong style='color:red'>请输入至少5个字符</strong>",
number: "<strong style='color:red'>请输入数字</strong>",
equalTo:"两次输入密码不一致不一致"
},
"age":
{
required: "<strong style='color:red'>请输入年龄</strong>",
rangelength: "<strong style='color:red'>请输入一个可用的数字</strong>"
},
"birthdate":
{
dateISO: "<strong style='color:red'>请输入日期格式</strong>"
},
"email":
{
email: "<strong style='color:red'>请输入邮箱格式</strong>"
},
"mainPage":
{
url: "<strong style='color:red'>请输入网页地址格式</strong>"
}
},
onkeyup: false
});
</script>
界面展示
<table>
<tr>
<td>
用户名(字符串类型):
</td>
<td>
<input type="text" name="userName" />
</td>
</tr>
<tr>
<td>
密码(字符,数字,长度范围):
</td>
<td>
<input type="password" name="pwd" />
</td>
</tr>
<tr>
<td>
密码(字符,数字,长度范围):
</td>
<td>
<input type="password" name="confirmPwd" />
</td>
</tr>
<tr>
<td>
年龄(范围数字):
</td>
<td>
<input type="text" name="age" />
</td>
</tr>
<tr>
<td>
出生时间(时间格式):
</td>
<td>
<input type="text" name="birthdate" />
</td>
</tr>
<tr>
<td>
邮箱(邮箱格式):
</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr>
<td>
个人主页(连接地址):
</td>
<td>
<input type="text" name="mainPage" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="提交" />
</td>
</tr>
</table>
效果图: