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

应用场景

---

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

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)而已。