使用正則表達式的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.