validate与submit
jQuery Validate 插件为表单提供了强大的验证功能,在使用validate.js进行表单的验证时,需要引入一下3个文件:
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> //中文提示包
而validate需要submit的时候才有验证,如何不使用submit的时候,也可以使用表单的验证:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" action="">
<fieldset>
<legend>验证完整的表单</legend>
<!--required的验证-->
<p>
<label for="firstname">名字</label> <input id="firstname"
name="firstname" type="text" required="required">
</p>
<p>
<label for="password">密码</label> <input id="password"
name="password" type="password" required="required">
</p>
<!--email的验证-->
<p>
<label for="email">Email</label> <input id="email" name="email"
type="email">
</p>
<!--url的验证-->
<p>
<label for="url">Url</label> <input id="url" name="url"
type="url">
</p>
<!--手机号码的验证-->
<p>
<label for="tel">tel</label> <input id="tel" name="tel"
type="tel" pattern="^[0-9]{7,12}$">
</p>
<!--日期的验证-->
<p>
<label for="date">date</label> <input id="date" name="date"
type="date">
</p>
<!--日期格式的验证-->
<p>
<label for="dateISO">dateISO</label> <input id="dateISO" name="dateISO"
type="dateISO">
</p>
<!--number的验证-->
<p>
<label for="number">number</label> <input id="number" name="number"
type="number">
</p>
<p>
<input class="submit" type="submit" value="提交">
<button class="button nihao" type="button">提交2</button>
</p>
</fieldset>
</form>
</body>
<script>
var vali;
vali=$("#signupForm").validate()
$('.nihao').click(function(){
if (vali.form()) {
} else {
}
})
</script>
</html>
当我们点击非submit的时候,也可以进行验证……