void()仅仅是代表不返回任何值,但是括号内的表达式还是要运行,如
void(alert("Wornning!"))
setCustomValidity 的用法:
var inpObj = document.getElementById("id1"); inpObj.setCustomValidity(''); // 取消自定义提示的方式 if (inpObj.checkValidity() == false) { if(inpObj.value==""){ inpObj.setCustomValidity("不能为空!"); }else if(inpObj.value<100 || inpObj.value>300){ inpObj.setCustomValidity("请重新输入数值(100~300之间)!"); } document.getElementById("demo").innerHTML = inpObj.validationMessage; } else { document.getElementById("demo").innerHTML = "输入正确"; }
尝试一下 »
用户体验提示
表单验证 html 属性 required 有几个缺陷。
就是当一个 input 设置为 required 的时候,在初始化时,因为其本身是空的,所以 invalid 伪类会对它起作用,这不是我们想看到的,此时我们什么还都没有做。
我们可以统一在这些伪类前加上父选择器 .invalid,这时只有在父元素具有 invalid 类时,这些伪类才会起作用。可以设置一个 submit 事件,在表单提交因验证失败后,会触发 input 的 invalid 事件,给 form 添加 invalid 类:
form.addEventListener('invalid', function() {this.className = 'invalid'}, true)
因为 invaild 是 Input 的事件,而不是 form 的事件,所以这里我们设置第三个参数为 true 采用事件捕获的方式处理,另外 css 选择器的使用对 this.className 影响需要提前处理。
onsubmit="return validateForm()" 为什么不是 onsubmit="validateForm()" ??
onsubmit="validateForm()" 能够调用 validateForm() 对表单进行验证,但是在验证不通过的情况下,并不能阻止表单提交。
onsubmit="return validateForm()" 当验证不通过时,返回 false,可以阻止表单提交。
为何?
原来 onsubmit 属性就像是 <form> 这个 html 对象的一个方法名,其值(一字符串)就是其方法体,默认返回 true;
onsubmit="return validateForm()"
相当于:
Form.prototype.onsubmit = function() { return validateForm() };
这样复写了 onsubmit 的默认方法(默认返回 true),根据 validateForm() 的结果返回 true 或 false,当验证不通过时,返回 false,onsubmit="return false;" 阻止表单提交。
关于多表单使用同一验证函数问题:
上面用 js 表单验证判断表单字段(fname)值是否存在,如果想多个表单都使用同一个函数调用,传入参数后功能会失效,希望有大佬能解决这个问题。
现在我在网上找到的替代方法如下:
function validateForm(form) { var x = form.name.value; if (x == null || x == "") { alert("输入不能为空!"); return false; } }
所有表单调用时都使用:
onsubmit="return validateForm(this)"
经验证好使。
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
525JavaScriptvoid
void()仅仅是代表不返回任何值,但是括号内的表达式还是要运行,如
524JavaScript验证API
setCustomValidity 的用法:
尝试一下 »
523JavaScript表单
用户体验提示
表单验证 html 属性 required 有几个缺陷。
就是当一个 input 设置为 required 的时候,在初始化时,因为其本身是空的,所以 invalid 伪类会对它起作用,这不是我们想看到的,此时我们什么还都没有做。
我们可以统一在这些伪类前加上父选择器 .invalid,这时只有在父元素具有 invalid 类时,这些伪类才会起作用。可以设置一个 submit 事件,在表单提交因验证失败后,会触发 input 的 invalid 事件,给 form 添加 invalid 类:
因为 invaild 是 Input 的事件,而不是 form 的事件,所以这里我们设置第三个参数为 true 采用事件捕获的方式处理,另外 css 选择器的使用对 this.className 影响需要提前处理。
522JavaScript表单
onsubmit="return validateForm()" 为什么不是 onsubmit="validateForm()" ??
onsubmit="validateForm()" 能够调用 validateForm() 对表单进行验证,但是在验证不通过的情况下,并不能阻止表单提交。
onsubmit="return validateForm()" 当验证不通过时,返回 false,可以阻止表单提交。
为何?
原来 onsubmit 属性就像是 <form> 这个 html 对象的一个方法名,其值(一字符串)就是其方法体,默认返回 true;
相当于:
这样复写了 onsubmit 的默认方法(默认返回 true),根据 validateForm() 的结果返回 true 或 false,当验证不通过时,返回 false,onsubmit="return false;" 阻止表单提交。
521JavaScript表单
关于多表单使用同一验证函数问题:
上面用 js 表单验证判断表单字段(fname)值是否存在,如果想多个表单都使用同一个函数调用,传入参数后功能会失效,希望有大佬能解决这个问题。
现在我在网上找到的替代方法如下:
所有表单调用时都使用:
经验证好使。