Javascript form validation-submit form_javascript skills

Recommended reading: Javascript form validation length

Javascript form validation - first introduction to regular expressions

Javascript form validation - unveiling regular expressions

JavaScript can be used to validate these input data in HTML forms before the data is sent to the server.

Bad data should not reach the server: validation when submitting a form

There is a form attribute in the form field object, which uses an array to represent the fields of the entire form

Suppose there is only a simple information text box and a zip code box, and a submit button

<form>
<input id="message" name="message" type="text" size="12" onBlur="validate_Length(1,32,this,document.getElementById('message_help'));" />
<message_help" class="help"></span>
<input id="ZipCode" name="phone" type="text" size="5" onBlur="validate_ZipCode(this,document.getElementById('ZipCode_help'));" />
<span id="ZipCode_help" class="help"></span>
<input type="button" value="Order Banner" onClick="placeOrder(this.form);"/>
</form>
<script language="javascript" type="text/javascript">
//文本长度验证
function validate_Length(minLegth,maxlength,inputFiled,helpText)
{
if(inputFiled.value.length<minLegth||inputFiled.value.length>maxlength)
{
if(helpText!=null)
{
helpText.innerHTML="请输入长度为"+minLenght+"到"+maxLength+"的文本";
return false;
}
}
else if(helpText!=null)
{
helpText.innerHTML=""
return true;
}
}
//邮政编码验证
function validate_ZipCode(inputFiled,helpText)
{
if(inputFiled.value.length!=5)
{
if(helpText!=null)
helpText.innerHTML="邮政编码长度必须为5位";
return false;
}
else if(isNaN(inputFiled.value))
{
if(helpText!=null)
helpText.innerHTML="邮政编码必须为数字";
return false;
}
else if(helpText!=null)
{
helpText.innerHTML=""
return true;
}
}
function placeOrder(form)
{
if(validateNonEmpty(1,32,form["phone"],form["phone_help"])&&validate_ZipCode(form["ZipCode"],form["ZipCode_help"]))
{
form.submit();
}
else{
alert("您填写的表单数据至少有一项不合法");
}
}
</script>

Summary: You only need to call the corresponding verification function and get the return value, and then you can complete the final data filtering when submitting the form

In practical applications, it is often necessary to verify the length, non-empty, illegal characters, format, size, etc. of the data. I will not introduce them one by one here, but the emphasis is on understanding.

Okay, the editor will introduce you to the relevant knowledge about Javascript form verification and form submission here. I hope it will be helpful to you!