<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 jQuery validate 表单验证</title>
<script src="../scripts/jquery-3.3.1.min.js"></script> <!--导入本地js库-->
<script src="../scripts/jquery.validate.min.js"></script>
<script src="../scripts/messages_zh.min.js"></script>
<script>
$(document).ready(function () {
$("#form1").validate({
rules:{ //校验规则
userName:{
required: true,
minlength: 2
},
email:{
required:true
},
password:{
required: true,
minlength: 5
}
} ,
messages:{ //提示
userName:{
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
email:{
required:"请输入邮箱地址"
},
password:{
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
}
}
});
});
</script>
</head>
<body>
<form id="form1" action="#">
<input type="text" id="userName" class="userName" name="userName"><br>
<input type="email" id="email" name="email"><br>
<input type="password" id="password" class="password" name="password"><br>
<input type="submit" value="login">
</form>
</body>
</html>