Hello everyone, meet again, I am your friend Quanzhanjun.
In actual development, the verifications we often encounter are non-null verification, digital verification, telephone verification, and mailbox verification. Here I will use the above verification as an example, and search for other verifications online. A lot.
In fact, using regular expression verification is a more flexible way. First, regular expression verification is introduced. I will paste the code directly below. One thing to note is the non-empty check. Many times we need to check for non-empty, and even spaces must be checked, so the non-empty check in the example will check spaces. of.
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<span>non empty:</span><input type="text" id="str"><span style="display:none;color:red">Can not be empty</span><br>
<span>phone number:</span><input type="text" id="tel"><span style="display:none;color:red">Please enter the correct phone number</span><br>
<span>Mail:</span><input type="text" id="email"><span style="display:none;color:red">please enter your vaild email</span><br>
<span>number:</span><input type="text" id="int"><span style="display:none;color:red">Please key in numbers</span><br>
<input type="button" value="verify" 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>The effect is as follows:
It's a simple check, and it's not pretty. So briefly introduce a plug-in validationEngine, this plug-in is relatively convenient and easy to use, but also more beautiful. Many plug-ins are based on forms, but in actual development, we may not use forms, or we need to judge the conditions before checking, etc. These need to be handled flexibly, so I did not use forms for the following example. of.
<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 check</h2>
<span>non empty:</span><input type="text" id="str"><br>
<span>phone number:</span><input type="text" id="tel"><br>
<span>Mail:</span><input type="text" id="email"><br>
<span>number:</span><input type="text" id="int"><br>
<input type="button" value="verify" id="btn">
<input type="button" value="hide check" 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','the phone number is correct','pass');
} else {
$('#tel').validationEngine('showPrompt','phone number error','error');
}
var email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if(email.test($("#email").val())){
$('#email').validationEngine('showPrompt','mailbox is correct','pass');
}else{
$('#email').validationEngine('showPrompt','email error','error');
}
var num = /^\d+(\.\d+)?$/;
if(num.test($("#int").val())){
$('#int').validationEngine('showPrompt','Number is correct','pass');
}else{
$('#int').validationEngine('showPrompt','number error','error');
}
var str = $("#str").val().replace(/\s/g,"");
if(str == ""){
$('#str').validationEngine('showPrompt','cannot be empty','error');
}else{
$('#str').validationEngine('showPrompt','non-empty correct','pass');
}
$("#btn_hide").show();
})
$("#btn_hide").click(function(){
$('body').validationEngine('hideAll');
})
</script>Effect:
For more information on validationEngine, you can refer to here Front-end development repository.
Author: Lili Sign: Don't have too many illusions in life, but have more actions.
Copyright statement: The content of this article is contributed by Internet users, and the opinions of this article only represent the author himself. This site only provides information storage space services, does not own ownership, and does not assume relevant legal responsibilities. If you find any content suspected of infringing/violating laws and regulations on this site, please send an email to report. Once verified, this site will be deleted immediately.
Publisher: full stack programmer, please indicate the source: https://javaforall.cn/186458.html Original link: https://javaforall.cn