使用语义 UI 进行手机号码验证答案

【问题标题】：Mobile number validation using semantic UI使用语义 UI 进行手机号码验证
【发布时间】：2018-03-03 11:04:57
【问题描述】：

我正在使用语义 UI。我在表格上填写了手机号码。验证在移动领域不起作用。我必须显示验证消息“输入有效的手机号码”。

我知道使用 Jquery 验证，但我必须使用语义 UI。

谁能帮我解决这个问题？

你能帮我解决这个问题吗？

$('.ui.form').form({
    mobileno: {
      identifier  : 'mobileno',
      rules: [
        {
          type   : 'empty',
          prompt : 'Enter your mobile number'
        },{
            type   : 'minLength[10]',
            prompt : 'Please enter the valid mobile number'
          }
      ]
    }
  });

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="https://oss.maxcdn.com/semantic-ui/2.1.4/semantic.min.css">

 <form action="process.php" method="post" class="ui form segment">
 <div class="field">
      <div class="ui input">
			  <input type="text" placeholder="Contact number" name="mobileno">
			</div>
      </div>
      
      <input class="ui black submit button" type="submit" name="submit" value="Submit"/>

</form>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://oss.maxcdn.com/semantic-ui/2.1.4/semantic.min.js"></script>

【问题讨论】：

谁能帮我解决这个问题？

标签： javascript jquery html semantic-ui phone-number

【解决方案1】：

脚本在 'mobileno' 元素周围遗漏了 fields: {...}。

还要确保 $('.ui.form') 出现在 jquery-3.1.1.min.js 导入之后。

其他 JS 导入也可能会干扰语义 UI 验证。 Fox 示例，如果您导入 'jquery-ui.min.js' after 'semantic.min.js' 它将破坏验证（'error' 样式不会附加到无效字段） .

【讨论】：

感谢回复，5个月后我收到了回复。哈哈哈，你能帮我写代码吗？