美文网首页
H5表单新验证属性及验证状态

H5表单新验证属性及验证状态

作者: Alone灬旅途 | 来源:发表于2016-12-15 08:38 被阅读2163次

    表单新验证属性

    1. required:验证当前元素之是否为空

    2. pattern: 使用正则表达式验证当前元素值是否匹配,不能验证内容是否为null

    3. min和max: 验证当前元素值最大值或最小值,一般使用与number/range等元素

    4. minlength和maxlength:验证当前元素值的最小长度和最大长度,minlength:并不是html5的新属性

    5)validity:表单验证HTML5提供一种有效状态,有效状态通过validityState对象获取到,validityState对象可通过validity属性得到

    表单新验证状态

    1、 validityState对象提供了一系列的有效状态

    通过有效状态判断,进行判断,注意:所有验证状态必须配合上诉的验证属性使用

    2、 valueMissing:

    判断当前元素值是否为空,配合required属性使用

    3、 typeMismatch

    判断当前元素值得类型是否匹配,配合email/number/url等属性使用

    4、 patternMismatch

    判断当前元素值是否匹配正则表达式,配合pattern属性使用

    5. tooLong

    判断当前元素值的长度是否正确,配合maxlength属性

    6. rangeUnderflow

    判断当前元素值是否小于min属性值,配合min

    7. stepMismatch

    判断当前元素值是否与step设置相同,配合step属性,并不与min和max属性值比较

    8. valid :

    判断当前元素是否正确,返回true - 表示验证成功,返回false - 表示验证失败

    9. customError:

    配合setCustomValidity()方法使用,setCustomValidity(),设置自定义的错误提示内容

    一旦使用该方法修改默认错误提示后,即使输入正确也会有提示

    一旦使用该方法,validityState所有验证状态都不通过

    解决办法:做判空处理

    if(validity.patternMismatch){

       user.setCustomValidity("用户名格式错误请重新输入");

    }else{

       user.setCustomValidity("");

    }

    相关文章

      网友评论

          本文标题:H5表单新验证属性及验证状态

          本文链接:https://www.haomeiwen.com/subject/ldvwmttx.html