Question

我试图教自己简单但不是很无聊（避免使用警报）形式验证的方式，现在我只是编写了一个非常简单的形式，并希望使用1函数验证它。但由于某些原因，表格没有验证，可能有任何建议吗？

我的代码：

<form id='test' onSubmit="return ValidateForm()">
Name * <input id="name" type="text"><span id="wrongname" class="error">This is a    required field</span>
Email* <input id="email" type="text"><span id="wrongemail" class="error">This is a required field</span>
<div>
<input type="submit" value="Submit" >
</div>
</form>

function ValidateForm() {
document.getElementById('test').onsubmit=function(){
  if(document.getElementById('name').value=""){
    document.getElementById('wrongname').style.display="block";
    return false;
  }
  else{
    return true;
  }
    if (email.value.search( /^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/ ) == -1){
alert(“Wrong email”);
return false;
}
  }
}

.error{
  display:none;
  color:red;
}

小提琴：http://jsfiddle.net/QvNFf/

Answer 1

Working fiddle

的变化：

删除了内联onsubmit处理程序，因为您在JavaScript
将onsubmit移出ValidateForm函数并将此函数指定为提交处理程序
修正了alert()
将=比较运算符更改为==。仅使用一个=进行分配
已移除return true，因为这会停止执行电子邮件验证
将email更改为document.getElementById('email')

更新的代码：

function ValidateForm() {

    if (document.getElementById('name').value == "") {
        document.getElementById('wrongname').style.display = "block";
        return false;
    }

    if (document.getElementById('email').value.search(/^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/) == -1) {
        alert("Wrong email");
        return false;
    }
}

document.getElementById('test').onsubmit = ValidateForm;

Answer 2

这里出现了一些问题：

document.getElementById('test').onsubmit = function () {}重复onsubmit属性
jsfiddle setup需要调整以使其正常工作
选择框架和扩展程序no wrap - in body
html：使用表单中的标签标签来增强可用性
js：请确保使用有效的引号=＆gt; alert(“Wrong email”);与alert("Wrong email");不同，会导致解析错误。
js：如果你需要检查一个值，请确保使用正确的运算符==或更好===，这也会检查它的类型。

demo

<强> [更新]

并删除电子邮件的返回true ^^

JavaScript非常简单的表单验证2个不同的输入

2 个答案: