大家好，又见面了，我是你们的朋友全栈君。
在实际的开发中，我们经常遇到的校验莫非于非空校验、数字校验、电话校验、邮箱校验，在这里我就以以上校验作例子，其他的校验网上一搜一大把。
其实使用正则表达式校验是比较灵活的一种方式，首先介绍正则表达式校验。下面我直接贴代码了，有一点要注意的，就是非空校验，很多时候我们需要校验非空，是连带空格都要校验的，所以例子中的非空校验是会校验空格的。
代码语言：javascript复制<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 = /^1d{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，这款插件还算是比较方便好用，也比较美观。很多插件都是基于表单的，但是在实际开发中，可能我们不是用的表单，而且又或者我们需要判断条件之后才校验等等，这些都需要灵活处理，所以一下例子我也是没有用表单做的。
代码语言：javascript复制<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 = /^1d{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>效果：
关于validationEngine的更多介绍，大家可以参考一下这里前端开发仓库。
Author：立礼 Sign：人生不要有太多的幻想，而要有更多的行动。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/186458.html原文链接：https://javaforall.cn
