我为表单验证编写了代码。
应该像这样工作:
检查(allLetter (uName))
,如果是true
,则验证下一个输入。
如果有任何验证false
,则应return false
。
我的问题是,如果两个验证都是true
,那么所有内容都是false
,并且不会发送表单。
如果我在true
中设置formValidation ()
,如果至少有一项检查为false,则不应发送该表单。
<form name='registration' method="POST" onSubmit="return formValidation();">
<label for="userName">Name:</label>
<input type="text" name="userName" size="20" />
<label for="userPhone">Phone:</label>
<input type="text" name="userPhone" size="20" />
<input type="submit" name="submit" value="Submit" />
</form>
function formValidation() {
var uName = document.registration.userName;
var uPhone = document.registration.userPhone;
if(allLetter(uName)) {
if(phone(uPhone)) {}
}
return false;
}
function phone(uPhone){
var digts = /^[0-9]+$/;
if(uPhone.value.match(digts)){
return true;
} else {
alert('Phone must have only digits');
uPhone.focus();
return false;
}
}
function allLetter(uName) {
var letters = /^[A-Za-z]+$/;
if(uName.value.match(letters)) {
return true;
}else{
alert('Username must have alphabet characters only');
uName.focus();
return false;
}
}
答案 0 :(得分:2)
首先,您使用的是一种超过20年的方式来获取对您的元素的引用(document.form.formElementNameAttributeValue
),虽然这仍然适用于遗留原因,但它不符合标准Document Object Model (DOM) API。
接下来,您已将验证测试分解为不同的方法(对于可重用性而言,这当然不是一个坏主意),但在这种情况下,添加大量您不需要的代码。我总是发现最好从简单开始并使代码工作,然后重构它。
您还没有正确使用<label>
元素。
另外一点,您的表单设置为通过POST
请求发送其数据。只应在更改服务器状态时使用POST
(即,您要在服务器上添加,编辑或删除某些数据)。如果这就是你的表格所做的那样,你很好。但是,如果没有,您应该使用GET
请求。
最后,您还使用20年以上的技术来设置使用内联HTML事件属性(onsubmit
),which should no longer be used for many reasons的事件处理程序。此外,使用此技术时,您必须使用验证函数中的return false
,然后使用属性中验证函数名称前面的return
取消事件,而不是仅使用event.preventDefault()
因此,这是一种基于标准的现代验证方法:
// Get references to the elements you'll be working with using the DOM API
var frm = document.querySelector("form[name='registration']");
var user = document.getElementById("userName");
var phone = document.getElementById("userPhone");
// Set up event handlers in JavaScript, not with HTML attributes
frm.addEventListener("submit", formValidation);
// Validation function will automatically be passed a reference
// the to event it's associated with (the submit event in this case).
// As you can see, the function is prepared to recieve that argument
// with the "event" parameter.
function formValidation(event) {
var letters = /^[A-Za-z]+$/;
var digts = /^[0-9]+$/;
// This will not only be used to show any errors, but we'll also use
// it to know if there were any errors.
var errorMessage = "";
// Validate the user name
if(user.value.match(letters)) {
// We've already validated the user name, so all we need to
// know now is if the phone is NOT valid. By prepending a !
// to the test, we reverse the logic and are now testing to
// see if the phone does NOT match the regular expression
if(!phone.value.match(digts)) {
// Invalid phone number
errorMessage = "Phone must have only digits";
phone.focus();
}
} else {
// Invalid user name
errorMessage = "Username must have alphabet characters only";
user.focus();
}
// If there is an error message, we've got a validation issue
if(errorMessage !== ""){
alert(errorMessage);
event.preventDefault(); // Stop the form submission
}
}
<!-- 20 is the default size for input elements, but if you do
want to change it do it via CSS, not HTML attributes -->
<form name='registration' method="POST">
<!-- The for attribute of a label must be equal to the id
attribute of some other element, not the name attribute -->
<label for="userName">Name:</label>
<input type="text" name="userName" id="userName">
<label for="userPhone">Phone:</label>
<input type="text" name="userPhone" id="userPhone">
<input type="submit" name="submit" value="Submit">
</form>