原生form表单提交没有走自定义校验和获取不到target的解决方式

352 阅读2分钟

原生form表单,没有走自定义校验

还是前段时间遇到这样的一个问题:
使用原生的form表单并且必须使用action方式提交的情况下, 没有走自定义校验规则,就直接提交了(表单的pattren属性除外)?

解决

使用input.setCustomValidity()去设置值去改变input.customError的值;
上面的input指的是:获取表单input的元素,下面分别是此元素里面的一些只读的属性;

image.png
只要customError的值为false时,指的是此input项没有输入值或者规范等的错误;
true时,则反之,是有错误的,
这时,原生的action方式提交时,就会被阻止掉,不会进行通讯提交数据和跳转。  

又因为customError属性是只读的,我们不能直接去修改该值,所以,可以利用修改input.setCustomValidity("") 的值去间接性的修改customError的值。

image.png

实践在自己代码里

image.png
上面的phoneValue.setCustomValidity(' ')passwordValue.setCustomValidity(' ')
就是间接的修改customError的值。
给赋值为空;

image.png

原生form表单,获取不到target

使用原生的form表单时,input里面的使用onchange事件,获取不到target,从而肉眼看不到target改变的值?

解决

使用e.persist();就可以啦

因为onchange监听输入值,是一个异步的操作,从而获取不到target,
所以使用e.persist()后再获取e.target.value的值,可以解决此问题。

结尾

以上就是我遇到原生的form表单并且必须使用action方式提交的情况下, 没有走自定义校验规则,就直接提交了(表单的pattren属性除外), 还有 原生表单获取不到target时,
我是如何解决的; 想必,肯定还有一些其他更好的解决方法,欢迎看到的大佬们可以留下你们的解决方式哦。