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