基于Semantic UI的表单手机号验证失效问题求助

没问题，我来帮你搞定Semantic UI的手机号验证！既然你明确要求用Semantic UI自带的表单验证而不是单独的jQuery Validate，那咱们直接用Semantic的表单验证模块来实现，步骤很清晰：

1. 确保依赖正确引入 #

首先要确保你的页面已经引入了jQuery（Semantic UI依赖它）、Semantic UI的CSS和JavaScript文件——这个是基础，没它验证功能跑不起来。

2. 编写表单HTML结构 #

先把表单和手机号字段的结构搭好，注意要给表单加上ui form类，同时预留错误提示的容器：

<form class="ui form">
  <div class="field">
    <label>Mobile Number</label>
    <input type="text" name="mobile" placeholder="Enter your mobile number">
  </div>
  <!-- 错误提示会自动渲染到这里 -->
  <div class="ui error message"></div>
  <button class="ui button" type="submit">Submit</button>
</form>

3. 初始化Semantic UI表单验证 #

接下来写JavaScript代码，调用Semantic的form()方法，给手机号字段配置验证规则和自定义提示：

$(document).ready(function() {
  $('.ui.form').form({
    // 可选：设置验证触发时机，比如失去焦点时验证
    on: 'blur',
    fields: {
      mobile: {
        // 对应input的name属性
        identifier: 'mobile',
        rules: [
          // 第一规则：必填
          {
            type: 'empty',
            prompt: 'Please enter your mobile number'
          },
          // 第二规则：手机号格式验证（这里用国内11位手机号正则，可按需调整）
          {
            type: 'regExp[/^1[3-9]\\d{9}$/]',
            prompt: 'Enter the valid mobile number'
          }
        ]
      }
    }
  });
});

关键细节说明 #

• 正则表达式调整：上面的正则是针对国内11位手机号的，如果你的需求是支持国际手机号，可以把正则改成类似/^\+?[0-9]{10,15}$/（允许带+号，长度10-15位），根据你的业务需求灵活修改。
• 验证触发时机：如果希望用户输入过程中就实时验证，把on: 'blur'改成on: 'change'即可。
• 错误提示位置：Semantic会自动把错误消息放到你预留的.ui.error.message容器里，不需要手动操作DOM。

这样设置后，当用户输入的手机号不符合规则时，就会自动显示你要求的"Enter the valid mobile number"提示啦！

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