jquery 正则表达式验证_前端正则校验

全栈程序员站长

发布于 2022-11-14 11:54:39

1.4K0

发布于 2022-11-14 11:54:39

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

在实际的开发中，我们经常遇到的校验莫非于非空校验、数字校验、电话校验、邮箱校验，在这里我就以以上校验作例子，其他的校验网上一搜一大把。

其实使用正则表达式校验是比较灵活的一种方式，首先介绍正则表达式校验。下面我直接贴代码了，有一点要注意的，就是非空校验，很多时候我们需要校验非空，是连带空格都要校验的，所以例子中的非空校验是会校验空格的。

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
	<span>非空：</span><input type="text" id="str"><span style="display:none;color:red">不能为空</span><br>
	<span>电话号码：</span><input type="text" id="tel"><span style="display:none;color:red">请输入正确的电话号码</span><br>
	<span>邮箱：</span><input type="text" id="email"><span style="display:none;color:red">请输入正确的邮箱</span><br>
	<span>数字：</span><input type="text" id="int"><span style="display:none;color:red">请输入数字</span><br>
	<input type="button" value="验证" id="btn">
</body>
</html>
<script type="text/javascript">
	$("#btn").click(function(){
		var tel = /^1\d{10}$/;
    	if (!tel.test($("#tel").val())) {       		
           $("#tel").next("span").show();
    	}
    	var email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
   		if(!email.test($("#email").val())){
           $("#email").next("span").show();
    	}
    	var num = /^\d+(\.\d+)?$/;
    	if(!num.test($("#int").val())){
           $("#int").next("span").show();
    	}
    	var str = $("#str").val().replace(/\s/g,"");
    	if(str == ""){
        $("#str").next("span").show();
    	}
	})
</script>

效果这是如下：

这是很简单的校验，而且也不够美观。所以简单介绍一款插件validationEngine，这款插件还算是比较方便好用，也比较美观。很多插件都是基于表单的，但是在实际开发中，可能我们不是用的表单，而且又或者我们需要判断条件之后才校验等等，这些都需要灵活处理，所以一下例子我也是没有用表单做的。

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.validationEngine.js"></script>
<script type="text/javascript" src="jquery.validationEngine-zh_CN.js"></script>
<link href="validationEngine.jquery.css" rel="stylesheet" />
</head>
<body>
  <h2>validationEngine校验</h2>
	<span>非空：</span><input type="text" id="str"><br>
	<span>电话号码：</span><input type="text" id="tel"><br>
	<span>邮箱：</span><input type="text" id="email"><br>
	<span>数字：</span><input type="text" id="int"><br>
	<input type="button" value="验证" id="btn">
  <input type="button" value="隐藏校验" id="btn_hide" style="display:none">
</body>
</html>
<script type="text/javascript">
	$("#btn").click(function(){
		var tel = /^1\d{10}$/;
    	if (tel.test($("#tel").val())) {
       		 $('#tel').validationEngine('showPrompt','电话号码正确','pass');
    	} else {
       		 $('#tel').validationEngine('showPrompt','电话号码错误','error');
    	}
    	var email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
   		if(email.test($("#email").val())){
           $('#email').validationEngine('showPrompt','邮箱正确','pass');
  		}else{
       		 $('#email').validationEngine('showPrompt','邮箱错误','error');
    	}
    	var num = /^\d+(\.\d+)?$/;
    	if(num.test($("#int").val())){
           $('#int').validationEngine('showPrompt','数字正确','pass');
  		}else{
       		 $('#int').validationEngine('showPrompt','数字错误','error');
    	}
    	var str = $("#str").val().replace(/\s/g,"");
    	if(str == ""){
        $('#str').validationEngine('showPrompt','不能为空','error');
    	}else{
    		$('#str').validationEngine('showPrompt','非空正确','pass');
    	}
      $("#btn_hide").show();
	})
  $("#btn_hide").click(function(){
      $('body').validationEngine('hideAll');
  })
</script>

效果：