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