jquery validate插件前端表单验证插件的使用

时间:2022-11-30 15:22:41

今天发现了一个特别好用的表单验证插件,功能相当强大。而且使用起来也特别简单。


首先,你需要引入相应的js文件。


<script src="${pageContext.request.contextPath }/js/jquery.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.validate.min.js"></script>

我先把我jsp页面中的内容贴出来吧!

<form id="reg"
action="${pageContext.request.contextPath }/RegistServlet">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" value="${user.username }"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" id="password" name="password" value="${user.password }"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="text" id="ckeckpassword" name="checkpassword" value="${user.password }"></td>
</tr>
<tr>
<td>昵称</td>
<td><input type="text" name="nickname" value="${user.nickname }"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email" value="${user.email }">
</td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" name="valistr"><label value="">${msg }</label></td>
</tr>
<tr>
<td><button type="submit">提交</button></td>
<td><img src="${pageContext.request.contextPath }/ValiImg"
style="cursor: pointer" onclick="change(this)"></td>
</tr>
</table>
</form>





然后编写你自己页面的js代码。

$().ready(function(){
$("#reg").validate({
rules : {<span></span>//rules 用于对表单内容进行约束
username : "required", //用于控制用户名输入框必填
password : "required",
nickname : "required",
checkpassword : {<span></span>//多个约束条件的时候,可以用大括号包起来
required : true,
equalTo : "#password"<span></span>//第二次输入验证码的时候,通过验证它与第一次输入的是否相同来验证
},
email : {
required : true,
email : true<span></span>//email :true 验证是否是邮箱格式
}

},
messages : {<span></span>//messages 用于验证的时候在页面上输出提示信息,要注意的是messages与rules是一一对应的
username : "请输入用户名",
password : "请输入密码",
nickname : "请输入昵称",
checkpassword : {
required : "请再次输入密码",
equalTo : "两次密码不一致"
},
email : {
required : "请输入邮箱",
email : "邮箱格式不正确"
}
}

});
});


更多详细内容请参考菜鸟教程 http://www.runoob.com/jquery/jquery-plugin-validate.html