关于多表单使用同一验证函数问题：

上面用 js 表单验证判断表单字段(fname)值是否存在，如果想多个表单都使用同一个函数调用，传入参数后功能会失效，希望有大佬能解决这个问题。

现在我在网上找到的替代方法如下：

function validateForm(form) {
    var x = form.name.value;
    if (x == null || x == "") {
        alert("输入不能为空！");
        return false;
    }
}

所有表单调用时都使用：

onsubmit="return validateForm(this)"

经验证好使。

用户体验提示

表单验证 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 影响需要提前处理。