H5表单反馈与自定义验证

H5新增invalid响应事件,会在表单验证失败后自动调用。并且可以通过validity属性查看哪种验证未通过

八大验证:

valueMissing  	 :  输入值为空时返回true
typeMismatch 	 :  控件值与预期类型不匹配返回true
patternMismatch  :  输入值不满足pattern正则返回true
tooLong  		 :  超过maxLength最大限制返回true			
rangeUnderflow   :  验证的range最小值返回true
rangeOverflow    :  验证的range最大值返回true
stepMismatch     :  验证range 的当前值 是否符合min、max及step的规则返回true

下面通过例子看一下表单反馈的结果

    <form action="">
        <input type="email"/>
        <input type="submit" value="提交"/>
    </form>
	const email = document.querySelector('input[type=email]')

	  //单验证反馈
	 email.addEventListener('invalid',function(){
	      console.log('验证失败'+this.validity) //返回验证通过的属性
	  })

在这里插入图片描述
在这里插入图片描述
可以看到除了typeMismatch其他均返回false,是因为在输入框中输入了与预期类型不符合的字符串,导致typeMismatch匹配失败返回true

如果需要自定义表单验证则可以,通过给特定验证响设置setCustomValidity属性进行自定义验证

        <input type="text">

    const input = document.querySelector('input[type=text]')
    const submit = document.querySelector('input[type=submit]');
    //自定义验证
    submit.addEventListener('click' , function(){
         if(input.value !==1){
             input.setCustomValidity('你输入的部不是1')
         }else{
             input.setCustomValidity('');
         }
     })

关闭表单验证
在提交标签添加formnovalidate="formnovalidate"

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读