使用jQuery的validate插件实现一个简单的表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="margin: 50px;">
<form id="form1" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
<!--引入JQ库-->
<script src="../js/jquery-3.3.1.js"></script>
<!--引入validate库-->
<script src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$("#form1").validate({
rules:{
username:{
required:true
},
password:{
required:true,
minlength:4,
maxlength:6
}
},
messages:{
username:{
required:"用户名必填"
},
password:{
required:"密码不能为空",
minlength:"密码的最小长度为4",
maxlength:"密码的最大长度为6"
}
}
})
</script>
</body>
</html>
如果是radio或者checkbox，校验不通过时默认的提示信息在第一个radio后面，的解决方案：
//在radio标签前后面加上以下标签：注意，lable的for属性值要与radio的name属性值保持一致。 <label class="error" for="gender" style="display: none;"></label>