相信大家都在学习java的过程的学习了很多的表单校验,可以用html,js,jquery等等,都能实现表单验证的功能,但是使用起来不够灵活,操作起来也很麻烦,今天我给大家介绍一种前端的表单校验的一个插件validate。
首先我们需要到网上下载validate插件,这里使用菜鸟教程的提供的下载连接http://static.runoob.com/download/jquery-validation-1.14.0.zip
然就就可以开始写代码了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- 引入表单校验插件 -->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
$("#myform").validate({
rules:{
"nikename":{
"required":true
},
"username":{
"required":true,
},
"password":{
"required":true,
"rangelength":[6,12]
},
"repassword":{
"required":true,
"rangelength":[6,12],
"equalTo":"#password"
}
},
messages:{
"nikename":{
"required":"昵称不能为空"
},
"username":{
"required":"用户名不能为空",
},
"password":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位"
},
"repassword":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位",
"equalTo":"两次输入密码不一致"
}
}
});
});
</script>
<body>
<form action="#" method="post" id="myform">
nikename:<input type="text" name="nikename" id="nikename" /></br>
username:<input type="text" name="username" id="username" /></br>
password:<input type="text" name="password" id="password" /></br>
repassword<input type="text" name="repassword" id="repassword" /></br>
<input type="submit" value="注册" />
</form>
</body>
</html>