form表单中input的required属性和自定义验证方式冲突的解决策略

WEB前端 waitig 418℃ 百度已收录 0评论

应用场景


我要做一个用户资料审核的表单,里面输入项很多,为了输入的正确性,我想自己写验证方式来配合原生的表单一起使用,我要的效果是那一个输入框验证不过,直接跳到对应位置,并且光标自动选中出问题的文本框。遇到了以下问题:

1、 提交按钮使用type=”submit”,输入框采用required属性,自定义验证直接return,这种情况下,非空验证可以正常,但是像手机号码输入不正确的情况,光标就打到它后面没有输入内容的输入框里面了,这明显和验证提示不符合。我分析这与required属性有关,事实证明确实是这样的。
2、 提交按钮使用type=”button”,输入框采用required属性,自定义验证直接return,这种情况下,required属性不起作用(没有滚动到具体验证错误的地方)。
3、 提交按钮使用type=”submit”,自定义验证直接return,这种情况下,自定义验证不起作用(表单自动提交)。
4、 提交按钮使用type=”submit”,自定义验证直接return false,这种情况下,表单不能滚动到具体验证错误的地方(required自带滚动效果)。
5、 提交按钮使用type=”submit”,输入框采用required属性,自定义验证直接return false,这种情况下,非空验证可以滚动到具体出错的控件上,并光标选中,但是手机号或者邮箱号的正则表达式验证可以把光标选中到控件中,但是不能自动滚动到具体的位置(表单项很多翻页的情况,提交按钮和出问题的输入框不能同时显示的情况,return false 禁用了required的滚动效果)


解决方案


对于以上这些问题,最终其实就是给第五种情况找出策略。因为我想在非空验证的时候应用required的滚动效果,至于自己写的正则验证的情况自己计算滚动距离。
1、获取验证出错的input控件的当前位置

left=$("#inputid").offset().left,
top=$("#inputid").offset().top

2、滚动到input控件的位置

scrollTo(left,top);

具体我就是这么搞的

$(document).on("click","#submit",function () {
    //1、提交数据
    var username=$("#username");//用户名
    if (username.val()==""){
        username.select();
        alert("请认真填写用户名,提交后不可修改!");
        return ;
    }
    var telphone=$("#telphone");//座机
    if (telphone.val()==""){
        telphone.select();
        alert("请填写座机号:(例如:010-12345678)");
        return;
    }
    if(!reg_isPhone.test(telphone.val())){
        telphone.select();
        alert("你输入的座机格式不正确:(例如:010-12345678)");
        scrollTo(telphone.offset().left,telphone.offset().top);
        return false;
    }、、、、、、、
       此处略去n行代码
     、、、、、、、
     var banknum=$("#banknum");//银行卡号
    if (banknum.val()==""){
        banknum.select();
        alert("请填写银行卡号");
        return;
    }
    if(!reg_isBankCardNumber.test(banknum.val())){
        banknum.select();
        alert("请填写正确的银行帐号");
        scrollTo(banknum.offset().left,banknum.offset().top)
        return false;
    }

从上面可以看出我在进行非空验证的时候直接 return 采用required的滚动效果,而在自定义验证的时候采用return false来拦截表单的默认时间,防止光标选择到别的输入框中,但是return false后required默认的滚动效果也被取消了,所以需要自己手动滚动到具体的位置scrollTo(left,top)。


其实我用表单是为了利用表单中一些默认的效果,便于数据提交操作。其实我们要用ajax提交的话可以完全脱离表单操作,直接传递json串,只是在每个验证的return 前面多加一个scrollTo(left,top)而已。


本文由【waitig】发表在等英博客
本文固定链接:form表单中input的required属性和自定义验证方式冲突的解决策略
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)