表单校验的值valid、invalid、pristine和dirty

本文深入探讨Angular内置表单校验系统,解释valid、invalid、pristine和dirty状态,并展示如何通过$setPristine()和$name.$setDirty()方法控制表单状态。同时提供去除浏览器默认验证的方法及HTML5 input type属性的灵活应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

angular内置了一套表单校验,其中包含几个状态

①valid、invalid、pristine和dirty 
valid标记表单元素有效; 
invalid标记表单元素无效; 
pristine表示表单元素是纯净的,用户未操作过; 
dirty表示表单元素是已被用户操作过; 
②更改css属性 
.ng-pristine {} 
.ng-dirty {} 
.ng-valid {} 
.ng-invalid {} 

$scope.infoFrom.$setPristine();   //设置表单为未编辑的纯净状态
$scope.infoFrom.name.$setDirty();   //设置表单为用户已经编辑过得【脏】状态

去掉浏览器验证
<form name="infofrom" novalidate>
</from>

四.注意事项 
①novalidate 
        标准浏览器如火狐,谷歌等对HTML5有很好的支持。众所周知,HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式,那么请加上novalidate属性,以此避开浏览器自行验证。 
②type类型 
        HTML5的type属性可以包含text、email、number等,但是angular又内部重写了这些属性,所以放心大胆的去用吧,angular完全可以满足你所有的验证。 
③type="number"还是ng-pattern="/^[0-9]{6}$/" 
        你可以使用type="number"来限制输入框只能输入数字,当然你也可以用ng-pattern来验证用户输入,从而过滤掉非数字输入。这完全取决于你的爱好,没有硬性规定,只是选择多一些罢了。

<think>嗯,用户的问题是关于如何在HTML表单或前端实现最大校验的方法。我需要结合他们提供的引用内容来回答。首先,我应该先回忆一下HTML原生的表单验证属性,比如minmax,这在引用[1]中提到过。用户可能已经知道这些基础的方法,但可能需要更详细的说明或者进阶的方法。 接下来,用户还提到了联合校验的问题,比如最大不能小于最小,引用[2][3]讨论了这种情况。这说明用户可能需要处理多个输入框之间的关联校验,这时候单纯用HTML属性可能不够,需要用JavaScript或者框架提供的验证机制。 然后引用[4]提到了使用正则表达Element-UI的验证方式,这可能涉及到前端框架如Vue.js的处理方法。用户可能在使用某些UI框架,需要针对这些框架的解决方案。 我应该先分点回答,可能包括原生HTML的方法、使用JavaScript增强验证、以及常见框架如Element-UI或React中的实现。同时,要确保每个方法都有示例代码,并引用相关的引用来源。比如在原生HTML中使用max属性,引用[1]可以作为支持。联合校验的部分需要结合引用[2][3],说明如何处理多个输入框的关联验证,可能需要用事件监听或框架提供的验证规则。 另外,用户可能需要知道如何自定义错误提示,或者如何处理动态表单字段,如引用[3]中的场景二提到的枚举类型可增减的情况。这时候可能需要动态添加校验规则或者使用表单库如Formik或VeeValidate。 还需要注意不同浏览器的兼容性,虽然原生HTML5验证在现代浏览器中有效,但可能需要补充JavaScript来确保兼容性或更复杂的逻辑。同时,表单提交时的验证实时校验(如onblur或oninput事件)的区别也要提到。 最后,要确保回答结构清晰,先简单后复杂,先原生后框架,覆盖用户可能的各种使用场景。可能的问题包括如何自定义错误消息,如何处理多个字段的依赖校验,或者在动态表单中的实现方法。需要生成的相关问题可能涉及更具体的用例或框架细节。</think>### 在HTML或前端表单中实现最大校验的方法 #### 一、基础方法(原生HTML) 1. **使用`max`属性直接限制输入范围** 在`<input type="number">`中,通过`max`属性可直接限制输入的最大: ```html <input type="number" min="0" max="100" required> ``` 若输入超过`max`,浏览器会默认提示错误信息[^1]。 2. **结合正则表达式验证(适用于文本输入)** 若输入类型为`text`,可通过`pattern`属性结合正则表达式: ```html <input type="text" pattern="^(0|100|[1-9][0-9]?)$" title="请输入0-100的整数"> ``` 正则表达式`^(0|100|[1-9][0-9]?)$`限制输入范围为0-100[^4]。 --- #### 二、进阶方法(JavaScript/框架) 1. **联合校验最大与最小** 当需要校验`max``min`的关联关系(如最大不能小于最小),需通过JavaScript监听输入事件: ```javascript const minInput = document.getElementById('min'); const maxInput = document.getElementById('max'); minInput.addEventListener('change', () => { if (parseInt(minInput.value) > parseInt(maxInput.value)) { alert('最小不能大于最大'); minInput.value = ''; } }); ``` 此方法适用于动态关联校验场景[^2]。 2. **使用Element-UI的表单验证** 在Vue+Element-UI中,可通过自定义验证规则实现: ```javascript rules: { value: [ { validator: (rule, value, callback) => { if (value > 100) callback(new Error('不能超过100')); else callback(); }, trigger: 'blur' } ] } ``` 此方式支持动态错误提示多种触发条件。 3. **React中的动态校验** 在React中,结合状态管理表单库(如Formik): ```javascript <Formik initialValues={{ value: 0 }} validate={values => { if (values.value > 100) return { value: '超过最大' }; }} > {/* 表单内容 */} </Formik> ``` --- #### 三、特殊场景处理 1. **动态表单字段(如可增减的输入项)** 若表单字段可动态增减(如场景二[^3]),需在每次新增/删除字段时更新校验规则。例如使用Vue的`v-for`动态绑定`max`属性: ```html <div v-for="(item, index) in items" :key="index"> <input type="number" :max="getMaxValue(index)"> </div> ``` 2. **自定义错误提示样式** 通过CSS覆盖浏览器默认提示样式: ```css input:out-of-range { border: 2px solid red; } input:invalid + .error-message { display: block; } ``` --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值