极简单validate校验——1

最新推荐文章于 2025-03-20 10:42:24 发布

绿绿峰

最新推荐文章于 2025-03-20 10:42:24 发布

阅读量429

点赞数 1

分类专栏： jqueryvalidate 文章标签： jqueryvalidate

本文链接：https://blog.youkuaiyun.com/qq_37525899/article/details/81509338

版权

jqueryvalidate 专栏收录该内容

1 篇文章

订阅专栏

validate校验是一个比较流行的前端校验方法，引入js文件，还可以自定义校验规则。如下图~

哈哈，加了个bootstrap的样式，以免显得太丑~不多说，直接上码！

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>validate验证</title>
	<!-- 引入jq主文件，必须在validate上面引入 -->
	<script src="source/lib/jquery.js"></script>
	<!-- 校验主js文件 -->
	<script src="source/dist/jquery.validate.min.js"></script>
	<!-- 中文支持，需要哪个国家语言引入哪个 -->
	<script src="source/dist/localization/messages_zh_TW.min.js"></script>
	<!-- 给个bootstrap样式库 -->
	<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css
">
</head>
<body>


<div class="col-xs-6">
<form  id="commentForm" method="get" action="">

    <h3>台湾风格校验</h3>
    <p>
      <label>Name (必需, 最小两个字母)</label>	<!-- minlength标签内部限定，通常不这么用 -->
      <input name="name" minlength="2" type="text" class="form-control">
    </p>
    <p>
      <label >E-Mail (必需)</label> <!-- 俗称约定：required属性为必填项 -->
      <input  type="email" name="email" required class="form-control">
    </p>
    <p>
      <label >URL (可选)</label>
      <input  type="url" name="url" class="form-control">
    </p>
    <p>
      <label >备注 (必需)</label>
      <textarea  name="comment" required class="form-control"></textarea>
    </p>
    <p>
      <label >地址 (可选)</label>
      <textarea  name="home" class="form-control"></textarea>
    </p>

    <p>
      <label>操作时间 (必选)</label>
      <input  type="text" name="inputdate" class="form-control">
    </p>
    <p>
      <input  type="submit" value="走你~" class="btn btn-success">
    </p>
</form>
</div>
<div class="col-xs-6">
<form  id="form2" method="get" action="">
<h3>自定义密码校验</h3>
    <p>
      <label>密码 (必选)</label>
      <input  type="text" name="password" id="password" class="form-control">
    </p>
    <p>
      <label>确认密码 (必选)</label>
      <input  type="text" name="password2" id="password2" class="form-control">
    </p>
    <input  type="submit" value="再次走你~" class="btn btn-success">
    <span class="info" id="info"></span>
</form>
<script>

// $.validator.setDefaults({
//     submitHandler: function() {
//       alert("提交事件!");
//     }
// });


//页面加载完成执行此方法
$().ready(function() {

	//AAA获取被校验的表单使用自动验证【每个表单对象】
    $("#commentForm").validate({
    	//001.校验规则设定
    	rules: {
    		//根据【name】属性设定校验【用法    name属性：校验器名称】
    		//内置校验器列表：https://blog.youkuaiyun.com/chenjing928/article/details/78159816
    		name:"required",	//校验器：“必填项”这是单个校验
    		home:{
    			rangelength:[5,10]	//地址长度区间约束【多个配置之间逗号隔开】
    		},
    		inputdate:{
    			date:true		//时间限定
    		}

    	},
    	//002.自定义消息提示
    	messages: {
    		//还是获取name属性，同上，多重提示可以使用  name属性：{校验器："提示信息",……}
    		name:"亲，这个得填写啊，不填咋知道亲是何人？",
    	}
    });

    //BBB自定义验证规则		1起个方法名	2执行函数(用户输入的值，参数【el表达式】) 3提示信息
    jQuery.validator.addMethod('ckPassword',function(value,params){
    	var exp = new RegExp(params);	//创建正则对象，放入正则表达式
    	console.log("验证状态"+exp.test(value));
    	return exp.test(value); 		//测试匹配
    },"Sorry，您输入格式不大对");
    	//使用上面的新规则
    	 $("#form2").validate({
    	 	//规则限定
    	 	rules:{
    	 		password:{
    	 			required:true,			//必填
    	 			ckPassword:["#password","^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$"]
    	 		},
    	 		password2:{
    	 			required:true,
    	 			equalTo: "#password",	//通过id找到是否相同
    	 			ckPassword:["#password2","^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$"]
    	 		}
    	 	},	//提示信息
    	 	messages:{
    	 		password:{
    	 			required:"11密码得填，要不咋登陆？！",	//看，这里使用上面限定名称了
    	 			ckPassword:"11密码必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间"
    	 		},
    	 		password2:{
    	 			required:"22密码得填，要不咋登陆？！",	//看，这里使用上面限定名称了
    	 			ckPassword:"22密码必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间",
    	 			equalTo:"22你仔细瞅瞅，和刚才一样么？"
    	 		}
    	 	},	//自定义提示位置
    	 	// errorPlacement:function(error,element){
    	 	// 	error.appendTo(element.parent());
    	 	// },
    	 	// errorElement:[equalTo,"#info"],
    	 });
});
</script>	
</body>
</html>

参考一个校验器文章validate校验器，当然小伙伴可以在线搜更多的校验器

至于下载么，网上很多啦，要是想要小编的版本，validate1.14.0点进去便是~

分享就这么些，若有不对之处欢迎大家指正，留言~~