javaScript表单验证

1.javaScript表单验证

以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交；

//javascript
function validateForm(){
	var x=document.forms["myForm"]["fname"].value;
	if(x==null||x==" "){
		alert("需要输入名字");
		return false;		//阻止表单提交
	}
}
//HTML表单实例
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
//action属性是表单提交的后端服务器域名
名字：<input type="text" name="fname">
<intput type="submit" value="提交">
</form>

2.HTML表单自动验证

如果表单字段(fname)的值为空，required属性会阻止表单提交；

<form action="demo_form.php" method="post">
	<input type="text" name="fname" required="required">
	<input type="submit" value="提交">
</form>

3.数据验证

数据验证用于确保用户正确输入数据。

服务端数据验证是在数据提交到服务器上后在验证。 客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

HTML约束验证

即表单被提交时浏览器用来实现验证的一种算法。

4.HTML约束验证

//<form>/<input>autocomplete属性
//在用户完成一次表单提交后，浏览器会在该域中显示填写的选项.
//on表示开启，off表示关闭
<form acutocomplete="on"></form>

//<form>novalidate属性		该属性规定在提交表单时不应该验证form或input域
<form action="demo_form.php" novalidate></form>

//<input>autofcus属性  autofocus属性规定在页面加载时，域自动地获得焦点
First name:<input type="text" name="fname" autofocus>

//<input>formaction属性用于表单提交的URL地址，
//formaction属性会覆盖<form>元素中的action属性 只适用于type="submit"/type="image"
<form action="demo-form.php">
	<input type="submit" value="提交" formaciotn-"demo-admin.php">
</form>

//<input>formmethod属性  覆盖了<form>元素的method属性  与type="submit"/type="image"配合使用
//<input>fornovalidate属性，覆盖<form>元素的novalidate属性

//<input>height和width属性  该属性用于image类型的<input>标签的图像高度和宽度   只适用于type="image";

//<input>list属性  规定输入域的datalist。datalist是输入域的选项列表
<input list="browsers">
<datalist id="browsers">
	<option value="Internet Explrer">
	<option value="Firefox">
	<option value="opera">
</datalist>

//<input>min和max属性  min、max、step属性用于为包含数字货日期的input类型规定限定

//<input>multiple属性  规定<input>元素可选择多个值  适用于type="file"/type="email";
<input type="file" name="img" multiple>

//<input>pattern属性  pattern属性描述了一个正则表达式用于验证<input>元素的值

//<input>placeholder属性   提供提示，描述输入域所期待的值。在用户输入前显示在输入域上。

//<input>step属性  输入域规定合法的数字间隔
<input type="number" name="points" step="3">