这是我在jquery中进行表单验证的代码,其中添加了警报类,当我单击提交而不输入值时,alert
该类将应用于每个字段,但是在我的代码中,alert
该类不适用于电子邮件和密码验证。
function validate() {
var errorFlag = true;
var userinput = $('#username').val();
var mobilenumber=$('#mobnum').val();
// var emailid=$('#mail').val();
// var password=$('#pwd').val();
var address1=$('#addr1').val();
var address2=$('#addr2').val();
var characterReg = /^([a-zA-Z]{2,30})$/;
var numericReg=/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
// var emailReg=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
// var passReg=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/;
var addrReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;
var inputData = [{
id : "username",
regex : characterReg
}, {
id : "mobnum",
regex : numericReg
},
// {
// id:"mail"
// regex: emailReg
// },{
// id:"pwd"
// regex:passReg
// },
{
id : "addr1",
regex : addrReg
}, {
id : "addr2",
regex : characterReg
}];
for(var index=0; index < inputData.length; index++) {
var data = inputData[index];
var regex = data.regex;
if(!regex.test($('#' + data.id).val())) {
errorFlag = false;
$('#' + data.id).addClass('alert');
} else {
$('#' + data.id).removeClass('alert');
}
}
return errorFlag;
}
有什么建议吗?
您的代码基本上有两个问题:
首先:您忘记在这两个位置添加逗号:
{
id:"mail" <----------here
regex: emailReg
},{
id:"pwd" <----------here
regex:passReg
}
第二:至于电子邮件部分,您的正则表达式有误,请更改此行:
var emailReg=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
对此:
var emailReg = /^([\w-\.]+@([\w-]+)+(\.[\w-]{2,4})?)$/;
代码:jsFiddle (1)
function validate() {
var errorFlag = true;
var userinput = $('#username').val();
var mobilenumber = $('#mobnum').val();
var emailid = $('#mail').val();
var password = $('#pwd').val();
var address1 = $('#addr1').val();
var address2 = $('#addr2').val();
var characterReg = /^([a-zA-Z]{2,30})$/;
var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
var emailReg = /^([\w-\.]+@([\w-]+)+(\.[\w-]{2,4})?)$/;
var passReg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/;
var addrReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;
var inputData = [{
id: "username",
regex: characterReg
}, {
id: "mobnum",
regex: numericReg
}, {
id: "mail",
regex: emailReg
}, {
id: "pwd",
regex: passReg
}, {
id: "addr1",
regex: addrReg
}, {
id: "addr2",
regex: characterReg
}];
for (var index = 0; index < inputData.length; index++) {
var data = inputData[index];
var regex = data.regex;
if (!regex.test($('#' + data.id).val())) {
errorFlag = false;
$('#' + data.id).addClass('alert');
} else {
$('#' + data.id).removeClass('alert');
}
}
return errorFlag;
}
$('#btnGo').on('click', validate);
input {
display: block;
margin-bottom: 5px;
width: 300px;
padding: 10px;
}
.alert {
border: 4px red solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id="username" placeholder="your username">
<input type="text" id="mobnum" placeholder="your mobile number">
<input type="text" id="mail" placeholder="your email">
<input type="text" id="pwd" placeholder="your password">
<input type="text" id="addr1" placeholder="your address - line 1">
<input type="text" id="addr2" placeholder="your address - line 2">
<button id="btnGo">Go</button>
(1) 请考虑在问题中提供MCVE代码(或摆弄小提琴)会带来更多帮助
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句