[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 先引入jquery后再引入jquery-validate -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<style type="text/css">
label.error{
color:red;
margin-left:5px;
}
</style>
</head>
<body>
<form id="theform" method="post">
<p>
用户名：<input type="text" name="username">
</p>
<p>
邮箱：<input type="text" name="email">
</p>
<p>
密码：<input type="password" name="password" id="password">
</p>
<p>
确认密码：<input type="password" name="repassword">
</p>
<p>
<input type="submit" name="">
</p>
</form>
</body>
<script type="text/javascript">
//给表单调用validate验证方法
$("#theform").validate({
//两个选项
//rules:定义验证规则
//messages:定义对应规则不通过的提示信息
rules:{
//键值对(:)
//name名称：规则
//username:'required'
username:{
required:true,
minlength:5
},
password:{
required:true,
},
repassword:{
required:true,
equalTo:'#password'
},
email:{
required:true,
email:true
}
},
messages:{
//name名称：对应提示信息
username:{
required:'用户名必填',
minlength:'用户名最少5个字符'
},
password:{
required:'密码必填啊',
},
repassword:{
required:'确认密码必填',
equalTo:'两次密码不一致'
},
email:{
required:'邮箱必填',
email:'邮箱格式非法'
}
}
});
</script>
</html>
