自定义表单校验怎么和原生 required 一起用？
我用 HTML 原生的 <input required> 做基础校验，但还想加个自定义规则：比如用户名不能是 admin。我在 submit 事件里写了判断，可一旦输入框为空，浏览器会先弹出“请填写此字段”，根本不触发我的 JS 校验。
试过用 novalidate 关掉原生提示，但这样连空值都不提醒了。有没有办法让原生 required 先生效，再跑我的自定义逻辑？比如下面这样：
<form id="myForm">
<input type="text" id="username" required />
<button type="submit">提交</button>
</form>JS 里想同时处理空值和特殊值，但总被原生行为打断，咋整？
- 1
回答
9浏览
表单验证时 required 属性不生效是怎么回事？
我写了个简单的登录表单，给用户名和密码都加了 required 属性，但提交时居然没触发浏览器默认的验证提示，直接就提交了。是不是哪里写错了？ 我用的是原生 HTML 表单，没加 JS 干预，按理说应...
- 1
回答
29浏览
HTML表单的required属性为啥有时候不生效？
我在写一个简单的登录表单，给input加了required属性，但有时候提交表单居然没触发验证，直接就发出去了，这是啥情况？ 我试过在Chrome和Firefox里测试，有的时候能拦住，有的时候点提交...
- 2
回答
34浏览
自定义表单校验规则不生效怎么办？
我在用原生 JavaScript 做一个注册表单，想对手机号做自定义校验，但写了验证函数后发现不管输什么都没反应，错误提示也不显示。我试过在 onblur 事件里调用校验函数，也绑定了 onsubmi...
- 2
回答
57浏览
React表单同时触发HTML原生验证和自定义提示怎么办？
最近在做注册表单时遇到个奇怪问题，我用了HTML5的required和pattern属性做基础验证，同时又在React里写了自定义错误提示。结果当用户输入不符合正则时，浏览器默认的红色边框和弹窗跟我的...
- 2
回答
29浏览
Angular表单验证中自定义校验器不生效怎么办？
我在用 Angular 做注册表单，想加个自定义校验器检查密码强度，但写了 validator 之后表单控件的 errors 一直是 null，根本没触发。明明已经 import 了，也加到 form...
- 2
回答
101浏览
自定义组件的props默认值和校验应该如何正确设置？
最近在写一个复用性较高的表单组件，但发现当父组件忘记传入required字段时，组件会报错。虽然设置了defaultProps，但有时候还是会失效，比如在动态生成组件时默认值没生效。 尝试过这样写： ...
- 1
回答
8浏览
Formik 表单里怎么监听某个字段变化并自动触发校验？
我用 Formik 做一个注册表单，想在用户输入手机号时实时校验格式是否正确，但试了 onInput 和 onChange 都没生效。官方文档说要用 validate，但那样是整个表单提交才触发的吧？...
- 2
回答
33浏览
Avue 表单中如何动态设置某个字段的 required 验证规则？
我在用 Avue 做一个动态表单，有些字段是否必填要根据其他选项来决定。比如选了“个人”类型，身份证号就必填；选了“企业”，就不需要。我试过在 option 里直接改 rules，但好像没生效。 现在...
- 2
回答
28浏览
TDesign 表单校验不生效是怎么回事？
我在用 TDesign 的 Form 组件做表单校验，rules 也配了，但提交时根本没触发校验，直接就通过了。明明字段是必填的，却一点提示都没有。 我试过把 rules 写在 FormItem 上，...
- 2
回答
35浏览
TDesign 表单校验不生效是怎么回事？
我用 TDesign 的 Form 组件做表单校验，但明明设置了 rules，提交时却完全没触发校验，直接就通过了，这是啥情况？ 我试过把 required 设成 true，也检查了字段名和 mode...
invalid事件来处理。先把表单缓存起来，然后监听两个事件：submit 和 invalid。submit 用来跑你的特殊值校验，invalid 处理空值情况。
这样写有个好处：原生校验先跑，如果通过了才执行你的逻辑。注意用了捕获阶段，效率更高。
其实浏览器内置校验已经挺快了，别自己重复造轮子。这种方案兼顾性能和功能，省事又高效。累死个人，每天都在跟这些细节较劲。