使用正则表达式的jQuery表单验证
[英]jquery form validation with regex
问题描述
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var usernameReg=/^[a-zA-Z ]$/;
var mobnumReg=/^[0-9]$/;
var emailReg=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var errors=false;
if($('#username').val()==''){
$('#username').after('<span class="errors">missing name</span>');
errors=true;
}
if($('#mobnum').val()==''){
$('#mobnum').after('<span class="errors">missing number</span>');
errors=true;
}
if($('#mail').val()==''){
$('#mail').after('<span class="errors">missing mail</span>');
errors=true;
}
if($('#pwd').val()==''){
$('#pwd').after('<span class="errors">missing password</span>');
errors=true;
}
if($('#addr1').val()==''){
$('#addr1').after('<span class="errors">missing address</span>');
errors=true;
}
if($('#addr2').val()==''){
$('#addr2').after('<span class="errors">missing address</span>');
errors=true;
}
if(errors==true){
return false;
}else{
return true;
}
}); });
</script>
</head>
<body>
<form method="post" id="user_form">
NAME <br>
<input type="text" name="username" id="username" class="req" ><br>
MOBILE NUMBER <br>
<input type="text" name="mobnum" id="mobnum" class="req" maxlength="10"><br>
E-MAIL <br>
<input type="email" name="mail" id="mail" class="req" ><br>
PASSWORD <br>
<input type="password" name="pwd" id="pwd" class="req" ><br>
ADDRESS 1<br>
<input type="text" name="addr1" id="addr1" class="req" ><br>
ADDRESS 2<br>
<input type="text" name="addr2" id="addr2" class="req" ><br>
<button type="submit" id="submit">Submit</button>
</form>
</body>
</html>
您好..我用正则表达式编写了用于jquery表单验证的代码...这里错误消息仅针对不正确的电子邮件显示..如果我输入了错误的用户名和手机号码，它应该显示错误消息....如何为此添加模式？
2 个解决方案
解决方案1
1 2016-12-15 13:01:40
正如我在评论中提到的那样，您应该将模式应用于输入方式。 尝试这个：
$(document).ready(function(){ $("#submit").click(function(){ var usernameReg=/^[a-zA-Z ]$/; var mobnumReg=/^[0-9]$/; var emailReg=/^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4})?$/; var username = $('#username').val(), mobnum = $('#mobnum').val(), mail = $('#mail').val(); var errors=false; if(username == '' || !usernameReg.test(username)){ $('#username').after('<span class="errors">missing name</span>'); errors=true; } if(mobnum == '' || !mobnumReg.test(mobnum)){ $('#mobnum').after('<span class="errors">missing number</span>'); errors=true; } if(mail == '' || !emailReg.test(mail)){ $('#mail').after('<span class="errors">missing mail</span>'); errors=true; } if($('#pwd').val()==''){ $('#pwd').after('<span class="errors">missing password</span>'); errors=true; } if($('#addr1').val()==''){ $('#addr1').after('<span class="errors">missing address</span>'); errors=true; } if($('#addr2').val()==''){ $('#addr2').after('<span class="errors">missing address</span>'); errors=true; } if(errors==true){ return false; }else{ return true; } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <form method="post" id="user_form"> NAME <br> <input type="text" name="username" id="username" class="req" ><br> MOBILE NUMBER <br> <input type="text" name="mobnum" id="mobnum" class="req" maxlength="10"><br> E-MAIL <br> <input type="email" name="mail" id="mail" class="req" ><br> PASSWORD <br> <input type="password" name="pwd" id="pwd" class="req" ><br> ADDRESS 1<br> <input type="text" name="addr1" id="addr1" class="req" ><br> ADDRESS 2<br> <input type="text" name="addr2" id="addr2" class="req" ><br> <button type="submit" id="submit">Submit</button> </form>
注意，您可能需要改善错误消息。 missing name已经不够了。 您应该说： either missing name or wrong pattern 。
解决方案2
0 2016-12-15 13:11:29
@Shafizadeh修复了您的代码。 请注意：您也可以仅在HTML中进行验证。 必填字段：
<input name="username" required>
匹配模式的字段：
<input name="mobnum" type="tel" pattern="[0-9]+">
基本上，当今所有现代浏览器都支持这些功能。 但是，如果您需要某种程度的互操作性，我已经编写了一个库Hyperform ，以确保这些属性可以追溯到IE 10。
正则表达式不适用于表单验证的jQuery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.