HTML 5 的客户端校验

 

校验方法有两种，一种是使用校验属性进行校验，另一种是调用checkValidity方法进行校验。 

首先，我们来看一下第一种方法，先上代码：

<form action="add" method="post">
		<p>使用校验属性</p>
		图书名：<input type="text" name="name" required><br>
		图书ISBN：<input type="text" name="isbn" required pattern="\d{3}-\d-\d{3}-\d{5}">
		<!-- /d表示数字，通配符；-是任意的，可以用别的作为连接符；{3}是出现的次数，是频率符； -->
		图书价格：<input type="number" name="price" min="20" max="150" step="5" ><br>
		<!-- type="number"：设置输入框只能是数字，min、max设置输入的最大最小值,
        step设置输入的数必须是5的倍数 -->
		<input type="submit" value="提交">
</form>

 代码的主要内容我都加上了注释，可以好好的理解一下，先看看效果吧；

当用户输入的内容与固定的命名规则不同时，点击提交就会出现这样的提示。 

然后我们来看一下调用方法的校验：

原理如下：

• 如果表单对象调用checkValidity()方法返回true，则表明该表单内的所有元素的输入都有效。只要任意一个表单元素不能通过输入校验，表单对象的checkValibity()方法就会返回false。
• 如果表单对象调用checkValibity()方法返回true，则表明该表单内的所有表单元素都可以通过输入校验；否则返回false。

然后我们来看一下代码：

<form action="add" method="post">
		生日：<input type="date" name="birth" id="birth"><br>
		邮件地址：<input type="email" name="email" id="email"><br>
		<input type="button" value="提交" onclick="return check()"><br>
		
	</form>
	<script type="text/javascript">
		function check()
		{
			return commonCheck("birth","生日","字段必须是有效的日期！")
            //birth对应找到form表单里id为birth的输入框的值
				&&commonCheck("email","邮件地址","字段必须符合电子邮件的格式！");
		}
		 function commonCheck(field,fieldName,tip)
		{
			var targetEle=document.getElementById(field);
			//如果该字段的值为空
			if (targetEle.value.trim()=="") {//获取值用.value，trim()是获取前后空格的函数
				alert(fieldName+"字段必须填写！");
				return false;//函数立即停止
			}
			//调用checkValidity()方法进行校验
			else if (!targetEle.checkValidity()) {
				alert(fieldName+tip);
				return false;
			}
			return true;
		}
	</script>

 重要的点我还是注释在了代码上，现在直接看效果图：

当不填写其中一项时，都会有这样的弹窗，当然如果不想要这样的弹窗，只要把alert改成想要的形式就好了。