Angular表单验证异常：输入非数字字符时输入框未高亮红色

嘿，这个问题我之前做AngularJS项目时也碰到过，咱们一步步来排查解决～

问题根源分析 #

从你给出的ng-class代码片段来看，大概率是条件判断只覆盖了「必填验证失败」的场景，没包含「数字格式验证失败」的情况：

• 当删除输入内容时，手机号字段触发required验证，cform.mobile1.$error.required为true，同时字段是$dirty状态，所以has-error类会被添加，输入框变红；
• 当输入字母时，虽然触发了格式验证（比如ng-pattern），cform.mobile1.$invalid会变成true，但如果你的ng-class条件里只判断了$error.required，那这个场景就不会触发has-error，自然不会高亮红色。

具体解决方案 #

1. 先确认手机号输入框的验证规则

确保你已经给手机号输入框添加了数字格式验证，比如用ng-pattern（比type="number"更严谨，避免浏览器允许输入e等特殊字符）：

<input type="text" 
       name="mobile1" 
       ng-model="yourMobileModel" 
       required 
       ng-pattern="/^[0-9]*$/" 
       placeholder="请输入手机号" />

2. 修正ng-class的判断逻辑

把原来针对特定错误的判断，改成判断字段是否整体无效（$invalid），只要字段被修改过（$dirty）或者表单已提交（submitted），且字段无效，就添加has-error类：

<div class="form-group" 
     ng-class="{ 
       'has-error': (
         ((submitted || cform.ccode1.$dirty) && cform.ccode1.$invalid) || 
         ((submitted || cform.mobile1.$dirty) && cform.mobile1.$invalid)
       ) 
     }">
  <!-- 国家码输入框 -->
  <input type="text" name="ccode1" ng-model="yourCcodeModel" required />
  <!-- 手机号输入框 -->
  <input type="text" name="mobile1" ng-model="yourMobileModel" required ng-pattern="/^[0-9]*$/" />
  
  <!-- 错误提示 -->
  <div ng-show="(submitted || cform.mobile1.$dirty) && cform.mobile1.$error.required" class="text-danger">手机号必填</div>
  <div ng-show="(submitted || cform.mobile1.$dirty) && cform.mobile1.$error.pattern" class="text-danger">仅允许数字</div>
</div>

这里简化了重复的cform.submitted（和变量submitted是同一个逻辑），同时用$invalid代替了特定错误判断，这样不管是必填还是格式验证失败，都会触发高亮。

3. 额外检查点

• 确认submitted变量在表单提交时被正确设置为true（比如在提交按钮的ng-click里赋值：submitted = true）；
• 确保表单的name属性正确设置为cform（和你代码里的cform对应）。

内容的提问来源于stack exchange，提问作者Nicoleta Wilskon