JS validate校验框架使用方式
1.引入JS
<script src="/assets/js/validate-methods.js"></script>
<script src="/assets/js/jquery.validate.js"></script>
<script src="/assets/js/messages_zh.js"></script>
2.两种使用方式
第一种
1.初始化form
$().ready(function() {
$("#myform").validate()
});
2.提交form事件
function update() {
// 数据校验
var validRet = $("#myform").valid();
if (!validRet) {
return;
}
//逻辑
}
3.Jsp
<form id="myform" method="post" action="">
<p>
<label for="cemail">输入框:</label>
<input id="cemail" name="cemail" type="email" required/>
</p>
<button type="button" onclick="update();">提交 </button>
<!-- <input class="submit" type="submit" value="验证"/>-->
</form>
其它参数具体请参考http://www.runoob.com/jquery/jquery-plugin-validate.html
第二种
1.初始化form
$().ready(function() {
$("#myform").validate({
rules: {
cip: {
required: true,//validate 属性(自带的或者扩展的)
ip: true //validate 属性(自带的或者扩展的)
}
},
messages: {
//如果没有提示就是用下面默认提示,一般不用配置
// cip: {
// required: "请输入IP",
// ip: "IP格式不正确"
// }
}
})
});
2.提交form事件
function update() {
// 数据校验
var validRet = $("#myform").valid();
if (!validRet) {
return;
}
//逻辑
}
Jsp:
<form id="myform" method="post" action="">
<p>
<label for="cip">输入框:</label>
<input id="cip" name="cip" type="text"/>
</p>
<button type="button" onclick="update();">提交 </button>
<!-- <input class="submit" type="submit" value="验证"/>-->
</form>
其它扩展参数在validate-methods.js中
实例参考:https://blog.csdn.net/jackiehome/article/details/42348653
validate-methods.js 要去上面网址中COPY。不过里面
// 判断是否包含中英文特殊字符,除英文”-_”字符外 这个方法报错,需要注释掉