一般在表单提交的时候都会有一些验证,比如验证手机号,邮箱,身份证啊这类的,当然现在有很多的js库可以干这个事,当然实在不成自己写也不难,不过html5里面新增了很多东西,可以帮助我们实现表单验证,今天就来看看怎么弄的。

    简单表单验证

    上面是一个做好的简单表单验证,页面上填写的内容不会真正提交。

    主要知识点

    我们一般用js库做表单验证的时候都是都会有一个方法或者正则去匹配输入的内容是否正确,但是在html5里面,input标签有一个pattern属性可以去写一个正则检测输入的内容是否相匹配,更神奇的是这个属性可以联合:valid和:invalid这两个伪元素去时时检测是否匹配(一般我们要时时匹配需要监听input事件)。

    上面我们可以看到如果我们输入的不是两位小数的时候边框就会变成红色,如果是又回变成灰色,这个其实是通过pattern和:valid,:invalid去实现的,关键代码如下:

    1. //css
    2. input:valid {
    3.     border: 1px solid #ccc;
    4.     outline: 1px solid #ccc;
    5. }
    6. input:invalid {
    7.     border: 1px solid red;
    8.     outline: 1px solid red;
    9. }
    10. //html
    11. <input type='text' id='money' placeholder='请输入金额' required pattern='^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$' />

    上面的案例受required属性的影响,如果有required属性,空的时候也会去匹配,如果没有required属性,空的时候不会去匹配。

    pattern属性除了可以css可以检测外,js也是有对应的方法可以检测的,通过元素的checkValidity()或者validity对象的valid检测是否验证正确,大致代码如下:

    1. document.getElementById('input').checkValidity();//检测是否验证正确,true表示验证正确,false表示验证失败
    2. //下面的方法也能检测
    3. document.getElementById('input').validity.valid

    validity对象里面很多参数,表示这个对象可以从多方面去验证,这里我们主要关注几个参数:patternMismatch和valid,第一个表示输入框的值是否和正则匹配正确,第二个valid则是最终的结果,注意这个valid这个值很奇怪,必须其他的值全部为false它才能为true。

    我们看到上面有一个customError,这个是干嘛的呢?我们有些时候会看到html5的错误提示,大概如下:

    这个输入框的内容其实是可以自定义的,例如setCustomValidity('***')可以自定义提示的内容,setCustomValidity('')可以置空,注意你一旦设置了setCustomValidity('***'),那么customError就会一直为true,valid就会一直为false,就是怎么都无法验证成功。

    DEMO下载

    点击下载[0积分]一共下载0
    回到顶部
    我要评论

    所有评论

      相关文章