Fatal编程技术网
  • javascript/
  • Javascript 语义UI表单验证不起作用

Javascript 语义UI表单验证不起作用

javascript jquery html forms

Javascript 语义UI表单验证不起作用,javascript,jquery,html,forms,semantic-ui,Javascript,Jquery,Html,Forms,Semantic Ui,我对语义用户界面非常陌生，我对Javascript有点生疏，所以请耐心听我说。我只是从他们的网站上复制粘贴了语义用户界面示例中的代码，以查看他们的表单验证是如何工作的，出于某种原因，它不适合我。我会错过什么吗 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href = "https://cdnjs.cloudflare.com/aj

我对语义用户界面非常陌生，我对Javascript有点生疏，所以请耐心听我说。我只是从他们的网站上复制粘贴了语义用户界面示例中的代码，以查看他们的表单验证是如何工作的，出于某种原因，它不适合我。我会错过什么吗

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
    <link rel="stylesheet" type="text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/form.css">
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"> </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/form.js"> </script>
  </head>
  <body>
  <script>
  $('.ui.form')
    .form({
      fields: {
        name: {
          identifier: 'name',
          rules: [
            {
              type   : 'empty',
              prompt : 'Please enter your name'
            }
          ]
        },
        skills: {
          identifier: 'skills',
          rules: [
            {
              type   : 'minCount[2]',
              prompt : 'Please select at least two skills'
            }
          ]
        },
        gender: {
          identifier: 'gender',
          rules: [
            {
              type   : 'empty',
              prompt : 'Please select a gender'
            }
          ]
        },
        username: {
          identifier: 'username',
          rules: [
            {
              type   : 'empty',
              prompt : 'Please enter a username'
            }
          ]
        },
        password: {
          identifier: 'password',
          rules: [
            {
              type   : 'empty',
              prompt : 'Please enter a password'
            },
            {
              type   : 'minLength[6]',
              prompt : 'Your password must be at least {ruleValue} characters'
            }
          ]
        },
        terms: {
          identifier: 'terms',
          rules: [
            {
              type   : 'checked',
              prompt : 'You must agree to the terms and conditions'
            }
          ]
        }
      }
    })
  ;
</script>

<form class="ui form segment">
  <p>Tell Us About Yourself</p>
  <div class="two fields">
    <div class="field">
      <label>Name</label>
      <input placeholder="First Name" name="name" type="text">
    </div>
    <div class="field">
      <label>Gender</label>
      <select class="ui dropdown" name="gender">
        <option value="">Gender</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
    </div>
  </div>
<div class="two fields">
  <div class="field">
    <label>Username</label>
    <input placeholder="Username" name="username" type="text">
  </div>
  <div class="field">
    <label>Password</label>
    <input type="password" name="password">
  </div>
</div>
<div class="field">
  <label>Skills</label>
  <select name="skills" multiple="" class="ui dropdown">
    <option value="">Select Skills</option>
    <option value="css">CSS</option>
    <option value="html">HTML</option>
    <option value="javascript">Javascript</option>
    <option value="design">Graphic Design</option>
    <option value="plumbing">Plumbing</option>
    <option value="mech">Mechanical Engineering</option>
    <option value="repair">Kitchen Repair</option>
  </select>
</div>
<div class="inline field">
  <div class="ui checkbox">
    <input type="checkbox" name="terms">
    <label>I agree to the terms and conditions</label>
  </div>
</div>
<div class="ui blue submit button">Submit</div>
<div class="ui error message"></div>
  </form>
</body>
</html>


$（'.ui.form'）
.表格({
字段：{
姓名：{
标识符：“名称”，
规则：[
{
键入：“空”，
提示：“请输入您的姓名”
}
]
},
技能：{
标识符：“技能”，
规则：[
{
键入：“minCount[2]”，
提示：“请至少选择两种技能”
}
]
},
性别：{
标识符：“性别”，
规则：[
{
键入：“空”，
提示：“请选择性别”
}
]
},
用户名：{
标识符：“用户名”，
规则：[
{
键入：“空”，
提示：“请输入用户名”
}
]
},
密码：{
标识符：“密码”，
规则：[
{
键入：“空”，
提示：“请输入密码”
},
{
键入：“minLength[6]”，
提示：“您的密码必须至少为{ruleValue}个字符”
}
]
},
条款：{
标识符：'术语'，
规则：[
{
键入：“已选中”，
提示：“您必须同意条款和条件”
}
]
}
}
})
;
跟我们说说你自己吧

名称
性别
性别
男性
女性
用户名
密码
技能
选择技能
CSS
HTML
Javascript
平面设计
管道工程
机械工程
厨房维修
我同意这些条款和条件
提交
因为语义需要jQuery才能工作，所以您必须在jQuery中调用语义UI函数。

我想知道Ashish sah的答案。因此，我为您的问题创建了一个代码笔：

这表明脚本不能位于
$（document）.ready（..

奇怪的是，问题中的代码也起作用了

唯一的区别我明白了：代码笔添加了脚本依赖项，添加了正文的末尾，而不是头部。

如果您已经加载了整个semantic.css和semantic.js文件，则不需要为表单添加css和js文件，请尝试将$（'.ui.form'）初始化包装在$（document）.ready（function）；。当您运行此代码时。您的控制台中出现了什么错误？@A.de Guzman您能检查答案吗？如果您仍然有问题，请发表意见，接受它或分享您的解决方案吗？因此，如果答案正确或至少有帮助，它会帮助他人并提供反馈。嘿，我错过了（）在函数之后。它将是
.ready（function（）{
查看jQuery的文档。我认为这些编辑器添加了自己的脚本。您只需要提供链接，并根据库添加这些编辑器添加代码。 
$(document).ready(function(){
  // and here your code
});