JS表单验证(正则表达式或其他任何东西）
JS Form validation (Regex, or anything)
我这里有一个脚本，应该在触发时运行。但是，仅当变量 passwd 未在我的 if else 语句中使用时，它才会起作用。最新更新的 JS：
function validateForm() {
var name = document.forms["myForm"]["name"].value;
var phone = document.forms["myForm"]["phone"].value;
var email = document.forms["myForm"]["email"].value;
var add = document.forms["myForm"]["address"].value;
var passwd = document.forms["myForm"]["password"].value;
var matchesCount = email.split("@").length - 1;
var matchesCount2 = email.split(".").length - 1;
var error = "";
if (!name || !phone || !email || !add || !passwd) {
error+="All must be filled out 'n"
if(phone.search(/^[0-9]*$/) == -1 || phone.length != 8){
error+="- Phone number can only contain digits 'n";}
if(passwd.search(/^[0-9a-zA-Z]*$/) == -1){
error+="- Password needs to be alphanumeric 'n";
}
if(passwd.length <8 || passwd.length > 16){
error+="- Password contain only 8-16 digits 'n";
}
if(matchesCount > 1 || matchesCount2 < 1){
error+="- Please enter a valid email 'n";
}
alert(error);
return false;
}
}
.HTML
<div id="newaccount">
<table id="tablenewuser">
<form name="myForm" action="ControllerServlet" onsubmit="return validateForm()" method="post">
<tr>
<td class="newusertd">Name:<span class="price">*</span></td>
<td class="newusertd"><input style="color: black;" type="text" name="name" class="Btn"></td>
</tr>
<tr>
<td class="newusertd">Contact Number:<span class="price">*</span></td>
<td class="newusertd"><input style="color: black;" type="text" name="phone" placeholder="98989898"class="Btn"></td>
</tr>
<tr>
<td class="newusertd">Email:<span class="price">*<br></span></td>
<td class="newusertd"><input style="color: black;" type="text" name="email" placeholder="xxx@hello.com" class="Btn"></td>
</tr>
<tr>
<td class="newusertd">Address:<span class="price">*</span></td>
<td class="newusertd"><input style="color: black;" type="text" name="address" class="Btn"></td>
</tr>
<tr>
<td class="newusertd">Password:<span class="price">*</span><br>(8-16 Characters with<br>one UPPERCASE & numbers)</td>
<td class="newusertd"><input style="color: black;" type="password" name="password" class="Btn">
</tr>
<tr>
<td class="newusertd"></td>
<td class="newusertd">
<input style="color: black;" type="submit" value="Create Account" class="Btn"/></td>
</tr>
</form>
</table>
</div>
（对不起，一团糟！
编辑：脚本有效，但密码无法正常工作。请看评论
快速浏览显示该区域至少存在 2 个问题：
-
passwd可以null并通过外部if条件。 尝试length会导致错误您可能希望将内部条件包装在
else块中if (name == null || name == "" || phone == null || phone == "" || email == null || email == "" || add == null || add == "" || passwd == null || passwd == "") { error+="All must be filled out 'n"; } else { // other conditions } if (error) alert(error); -
在JS中，它
passwd.length不是length()
您应该使用 JS 控制台来验证出现了哪些错误。
我看到了问题，.length是一个属性，而不是一个方法。您的长度检查应该是：
if (passwd.length >= 8 && passwd.length <= 16) {
error += "- Only 8-16 digits 'n";
}
还有一点需要注意的是，foo == null || foo == ""可以简化为!foo因为null和""都是JS中的伪造值。
我不是专家，但我建议您使用正则表达式 （ /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/ ） 评估邮件字段，我创建了一个单独的函数来验证表单中的每个值以添加文本错误，然后是另一个验证谁评估是否所有字段都通过评估，就像你的一样，但我这样做了： if(validateName(nameVar) && validateEmail(emailVar) 这是我制作的所有代码， 验证正确的格式邮件、按字母顺序排列的名称和没有空值的电话：
function validateName(nameVar) {
var nameReg = /^[a-zA-Z'.'s]{1,40}$/;
return nameReg.test(nameVar);
}
function validateEmail(emailVar) {
var emailReg = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/;
return emailReg.test(emailVar);
}
function email() {
var nameVar = $('#name').val();
var emailVar = $('#email').val();
var phoneVar = $('#phone').val();
var messageVar = $('#message').val();
if(!validateName(nameVar) ) {
console.log("dentro");
$('#nameError').text("Por favor ingresa un nombre valido");
}else{
$('#nameError').text("");
}
if(!validateEmail(emailVar) || emailVar == "") {
$('#emailError').text("Por favor ingresa un correo valido");
}else{
$('#emailError').text("");
}
if(phoneVar == "") {
$('#phoneError').text("Por favor ingresa un número telefonico");
}else{
$('#phoneError').text("");
}
if(validateName(nameVar) && validateEmail(emailVar) && emailVar != "" && phoneVar != ""){
var data = {};
data.name = nameVar;
data.email = emailVar;
data.phone = phoneVar;
data.message = messageVar;
//here your validate code with array of values ready for doing something
}
};
这是 HTML 代码：
<h4 class="title-yellow contacto" id="title-yellow">Envianos un mensaje</h4>
<div class="row"> </div>
<div class="row">
<div class="col-md-6 form-group">
<input class="form-control" id="name" name="nombre" placeholder="Nombre" type="text" required >
</div>
<div class="col-md-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required >
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<input class="form-control" id="phone" name="telefono" placeholder="Teléfono" type="tel" required >
</div>
</div>
<textarea class="form-control" id="message" name="mensaje" placeholder="Mensaje" rows="4">
</textarea>
<br>
<div class="row">
<div class="col-md-12 form-group">
<button class="email nohover pull-right" id="mail" onclick="email()">ENVIAR</button>
<p id="demo"></p>
<div id="nameError"></div>
<div id="emailError"></div>
<div id="phoneError"></div>
<div id="ajaxMessage"></div>
</div>
</div>
相关文章：
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 拒绝与.htaccess或其他任何内容的主链接
- 防止图像拖动，但其他任何内容
- 使用 javascript 或 flash 或其他任何东西从跨域 iframe 复制文本
- 如何使用css或js或其他任何东西来区分高分辨率手机和桌面
- 这是检查变量是否被定义的最佳方法，而不是 null 并等于 “” 或其他任何内容
- 简单代码仅适用于某些编辑器，而不适用于其他任何地方
- 在加载其他任何内容之前检查用户是否已登录
- geochart:添加html注释到它或其他任何其他替代图表
- Javascript在我的Rails的一个页面上启动，但在其他任何页面上都没有
- forEach在IE10上不能在Server 2008上工作，但在其他任何地方都可以在IE10中工作
- 单击文档中其他任何位置时触发，即使使用iframe也是如此
- 如何使用js、css或其他任何东西管理span中的文本分隔符
- 点击第二个选项，jquery不会工作，除非我点击页面上的其他任何东西
- 当单击页面上的其他任何地方时，使下拉菜单返回
- 现场Javascript不能在Electron中工作，但可以在其他任何地方工作
- Javascript代码不工作在Chrome，但工作在其他任何地方
- 如何关闭弹出窗口，如果其他任何点击
- Javascript 正则表达式，用于检查值是否以数字开头，后跟其他任何内容
- JS表单验证(正则表达式或其他任何东西）
