Fatal编程技术网
  • jquery/
  • 使用jQuery和regex验证字段

使用jQuery和regex验证字段

jquery regex

使用jQuery和regex验证字段,jquery,regex,Jquery,Regex,下面是关于JQuery的视频教程。我从视频中复制了代码，甚至将视频附带的代码复制并粘贴到我的文本编辑器中，但出于某种原因，它在我的机器上不起作用，但在教学视频中起作用。当我在字段中输入一个值时，它应该检查它是否是一封有效的电子邮件（使用REGEX），另一个字段是否是数字，密码字段是否匹配。如果没有，则会出现一条错误消息提示我。错误是，它接受了我所有的输入，没有做提示部分。 我不知道这是不是我的浏览器或机器上的设置造成的。请帮忙 <!doctype html> <html>

下面是关于JQuery的视频教程。我从视频中复制了代码，甚至将视频附带的代码复制并粘贴到我的文本编辑器中，但出于某种原因，它在我的机器上不起作用，但在教学视频中起作用。当我在字段中输入一个值时，它应该检查它是否是一封有效的电子邮件（使用REGEX），另一个字段是否是数字，密码字段是否匹配。如果没有，则会出现一条错误消息提示我。错误是，它接受了我所有的输入，没有做提示部分。 我不知道这是不是我的浏览器或机器上的设置造成的。请帮忙

<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="jquery.min.js"></script>
<style>
#wrapper {
width:600px;
margin:0 auto;
font-family: helvetica;
font-size:1.2em;
}
input {
    width:300px;
height:30px;
padding:5px;
border-radius:5px;
font-size:1.2em;
border: 1px solid grey;
margin-bottom:10px;
}
label {
width:200px;
float:left;
padding-top:7px;
}
#submitButton {
height:50px;
margin-left:200px;
width:100px;
}
#error {
color:red;
margin:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="error"></div>
<form id="validationForm">
<label for="email">Email</label>
<input name="email" id="email" />
<label for="phone">Telephone</label>
<input name="phone" id="phone" />
<label for="pass">Password</label>
<input name="pass" type="password" id="pass1" />
<label for="pass">Confirm Password</label>
<input name="pass" type="password" id="pass2" />
<input id="submitButton" type="submit" value="Submit" />
</form>
</div>
<script>
$("#validationForm").submit(function(event) {
var errorMessage="";
event.preventDefault();
function
isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|
[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([az]|\
d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])
+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-
\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-
\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF
\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
if (!isValidEmailAddress($
("#email").val())) {
errorMessage="<br />Please enter a
valid email address";
}
if (!$.isNumeric($("#phone").val())) {
errorMessage=errorMessage+"<br />Please enter a valid phone number";
}
if ($("#pass1").val() != $("#pass2").val()) {
errorMessage=errorMessage+"<br />Please enter matching passwords";
}
if (errorMessage=="") {
alert("Success!");
} else {
$("#error").html(errorMessage);
}
});
</script>
</body>
</html>


jQuery基础教程
#包装纸{
宽度：600px；
保证金：0自动；
字体系列：helvetica；
字体大小：1.2米；
}
输入{
宽度：300px；
高度：30px；
填充物：5px；
边界半径：5px；
字体大小：1.2米；
边框：1px纯灰；
边缘底部：10px；
}
标签{
宽度：200px；
浮动：左；
填充顶部：7px；
}
#提交按钮{
高度：50px；
左边距：200px；
宽度：100px；
}
#错误{
颜色：红色；
利润率：20px；
}
电子邮件
电话
暗语
确认密码
$（“#验证表单”）.submit（函数（事件）{
var errorMessage=“”；
event.preventDefault（）；
作用
isValidEmailAddress（电子邮件地址）{
var pattern=newregexp（/^（（[a-z]|\d|
[！\$%&'\*\+\-\/=\？\^{\\\\\}~]\[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]）+（\.（[az]|\
d |[！\$%&'\*\+\-\/=\？\^{\\\\}~].[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]）
+)*)|（（\x22）（（（\x20|\x09）*（\x0d\x0a））？（\x20|\x09）+？（[\x01-\x08\x0b\x0c\x0e-
\x1f\x7f]|\x21 |[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF]。（\\（[\x01-\x09\x0b\x0c\x0d-\x7f]。[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF]））*（（（（\x20|\x09）*（\x0d\x0a））？（\x20|\x09+）？（\x22））@（（[a-z]|\d|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]）|（[a-z]|\d |[\u00A0-\uD7FF\uF900-
\uFDCF\uFDF0-\uFFEF]）（[a-z]|\d |-|-|-|-|-|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF*）*（[a-z]|\d |[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]））\）+（[a-z]|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]）|（[a-z]|[\u00A0-\uD7FF\uF900-\uFDCF
\uFDF0-\uFFEF]）（[a-z]|\d |-|-|-|-|-|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF*）*（[a-z]|[u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]）\.？$/i）；
返回模式.test（emailAddress）；
};
if（！isValidEmailAddress）($
（“#email”）.val（））{
errorMessage=“
请输入
有效电子邮件地址”；
}
if（！$.isNumeric（$（“#phone”）.val（））{
errorMessage=errorMessage+“
请输入有效的电话号码”；
}
if（$（“#pass1”）.val（）！=$（“#pass2”）.val（））{
errorMessage=errorMessage+“
请输入匹配的密码”；
}
如果（errorMessage==“”）{
警惕（“成功！”）；
}否则{
$（“#error”）.html（errorMessage）；
}
});
我不知怎么整理了你的代码，并设法让它运行起来。有关详细信息，请参见下面的代码段

$（“#验证表单”）.submit（函数（事件）{
var errorMessage=“”；
event.preventDefault（）；
作用
isValidEmailAddress（电子邮件地址）{
（a-a-z）中国内地：：：：“\\\\\\\\\\\\\\\\\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \（（（（[a-z][[[a-z][[[[a-z]号）模式=新的regEXEXEXEXEXP（（（（（（（[a-a-z][[a-z]）））及\在场在场在场在场在场在场在场在场在场在场在场在场在场在场在场在场人士人士人士人士人士，，，，，，，，，\\\\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \///============，，，：：：：：：：：：：：\x22）（（（\x20 |\x09）*（\x0d\x0a））？（\x20 |\x09）+-（[\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21 |[\x23-\x5b]|[\x5d-\x7e]|࿈目前:4040404040404040404040404040\\\x01-\x01-\x01-\\x01-\x01-\x01-\x000\x000B\x0000000\0000000\000000000000000B\x0c\x0c\x0c\x0c\x0c\x0000C\x0d-\x0d-\X000\\x7f-\x7f-\X7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图|（[a-z]|\d |[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]）（[a-z]|\d |-\u124; ~[u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]）*（[a-z]|\（a-z[a-z[[a-a-z][[[a-z][[a-z][[UUU00000-\UUU0000-\UUU0000-\UUU0000-\UUU0000-\UU00000-\U000000000000-\uFDF0-\UFFEFEF.[[[[[[[[UU00000000000000000-\uFDF0-\uFDF0-\uFDF0-\UFF-\UFF-\UFF-\UFFEFEFEF-\UFFEFEFEFEFEFEFEFEFEFEF基金基金][[[[[[[[[[[[[[[[[[[1-a-a-a-a-a-z][a-a-z][a-a-z][a-a-a-z]]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]）\.？$/i）；
返回模式.test（emailAddress）；
};
if（！isValidEmailAddress（$（“#email”）.val（））{
errorMessage=“
请输入有效的电子邮件地址”；
}
if（！$.isNumeric（$（“#phone”）.val（））{
errorMessage=errorMessage+“
请输入有效的电话号码”；
}
if（$（“#pass1”）.val（）！=$（“#pass2”）.val（））{
errorMessage=errorMessage+“
请输入匹配的密码”；
}
如果（errorMessage==“”）{
警惕（“成功！”）；
}否则{
$（“#error”）.html（errorMessage）；
}
})；
#包装器{
宽度：600px；
保证金：0自动；
字体系列：helvetica；
字体大小：1.2米；
}
输入{
宽度：300px；
高度：30px；
填充物：5px；
边界半径：5px；
字体大小：1.2米；
边框：1px纯灰；
边缘底部：10px；
}
标签{
宽度：200px；
浮动：左；
填充顶部：7px；
}
#提交按钮{
高度：50px；
左边距：200px；
宽度：100px；
}
#错误{
颜色：红色；
利润率：20px；
}

jQuery基础教程
电子邮件
电话
暗语
确认密码
发布错误消息。错误是，它正在接受我的所有输入，没有执行提示部分。您好-我尝试将您的代码粘贴到jsbin.com，但收到一条警告，说我有一个“未关闭的正则表达式”。您是否验证了正则表达式粘贴是否正确？它非常长，因此我可以看出它很容易出错。您需要在此处检查确切的范围
[\x01-\x09\x0b\x0c\x0d-\x7f]
请参见，但即使没有正则表达式，如果我没有在电话字段中输入数字字符，我仍然会有一些错误提示，并且当密码字段和确认密码字段不匹配时会出现错误提示。我没有收到任何提示。我的所有字段似乎都“接受”我做了什么？你做了什么？！？谢谢！！！它工作了！请告诉我代码的错误。我从教程中得到的，正如我在视频中看到的，我以前的代码是