这个小程序就是检查你填的东西对不对，给你贴个小红旗提醒。其实就是帮你找出没填好的地方，避免交上去才发现出错。这个功能挺实用的，但也别指望它百分百保证你的信息正确。所以，咱们要把表单验证弄得更精细些，这样网页才能快速告诉你哪里错了，填起表来就更顺手了！
利用浏览器内置机制进行提示
只要用上支持HTML5表单验证的浏览器，看看validitystate就能知道表单有没有毛病！所有规则都完美照做，valid属性就是true；出个小差错，那它立马就变成false了。这样简单明了，让用户随时能发现错误并改正~
required特性的作用
var valCheck = document.myForm.myInput.validity;
添加“required”这个神奇的属性到表单控件，立马变身小苛刻鬼！如果没有手动或者编程填入内容，它就不给你好好提交！这招防止关键信息漏掉，让信息准确又完整呦~
valCheck.valid
特殊表单控件类型的应用
比起自定义手机键盘，还有很多好用的软件帮你检查输入有没有出错。比如，要是你填邮箱忘打”@”了，或者乱输个假数字，浏览器肯定会提醒你哪儿错了，这样你立马就能发现问题并改正！
格式规则验证与pattern特性
用pattern特性设置表格的正则表达式校验太赞了，真的感觉像有个自动检查员在帮忙似的。一旦输入的值跟预设模式不符，patternMismatch就会立马提示错误，还会告诉你哪里错了。所以记得给这个带pattern特性的表格加个title属性，把校验规则说清楚点，这样大家用着也更顺手！
最大长度限制与maxlength属性
虽然表单控件能帮我们管字数，可有时候还是会超过极限。别担心，maxlength属性就能明确告诉浏览器咱得设个限度，防止因为数据太长导致页面乱七八糟或者被截断！
范围值验证与max、min属性
咱只需要跟表单控件设定个max上限，看看数据是不是超过了它。一旦哪个控件的数值超出了这个限制，rangeUnderflow函数就会直接告诉我们”超！得赶紧调！”。
stepMismatch错误处理
浏览器自带的验证有时候不行，所以咱们得自己搞个提示，告诉大家怎么写才能过关比如，辛辛苦苦半天结果内容跟规定不符？这时候就得用代码给他们来点真实的反馈，让大家知道该咋办。
自定义验证消息与setCustomValidity方法
那些煎熬人的验证码？别烦心了！用setCustomValidity正确设置自己的错误提醒就能解决，不管是啥奇奇怪怪的需求，咱们都能hold得住，让朋友们看得明明白白。
咱们聊聊表单验证这个话题！学会运用各种验证工具和方法，不仅让网站用起来更舒心，少了很多繁琐的操作，还有助于保障数据安全~
评论0