校验方法有两种,一种是使用校验属性进行校验,另一种是调用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改成想要的形式就好了。