原生form表单,没有走自定义校验
还是前段时间遇到这样的一个问题:
使用原生的form表单并且必须使用action方式提交的情况下, 没有走自定义校验规则,就直接提交了(表单的pattren属性除外)?
解决
使用input.setCustomValidity()去设置值去改变input.customError的值;
上面的input指的是:获取表单input的元素,下面分别是此元素里面的一些只读的属性;
只要customError的值为false时,指的是此input项没有输入值或者规范等的错误;
true时,则反之,是有错误的,
这时,原生的action方式提交时,就会被阻止掉,不会进行通讯提交数据和跳转。
又因为customError属性是只读的,我们不能直接去修改该值,所以,可以利用修改input.setCustomValidity("") 的值去间接性的修改customError的值。
实践在自己代码里
上面的phoneValue.setCustomValidity(' ')和passwordValue.setCustomValidity(' ')
就是间接的修改customError的值。
给赋值为空;
原生form表单,获取不到target
使用原生的form表单时,input里面的使用onchange事件,获取不到target,从而肉眼看不到target改变的值?
解决
使用e.persist();就可以啦
因为onchange监听输入值,是一个异步的操作,从而获取不到target,
所以使用e.persist()后再获取e.target.value的值,可以解决此问题。
结尾
以上就是我遇到原生的form表单并且必须使用action方式提交的情况下, 没有走自定义校验规则,就直接提交了(表单的pattren属性除外), 还有 原生表单获取不到target时,
我是如何解决的;
想必,肯定还有一些其他更好的解决方法,欢迎看到的大佬们可以留下你们的解决方式哦。