Fatal编程技术网
  • javascript/
  • Javascript Jquery动态表单验证不起作用

Javascript Jquery动态表单验证不起作用

javascript jquery forms validation

Javascript Jquery动态表单验证不起作用,javascript,jquery,forms,validation,Javascript,Jquery,Forms,Validation,我试图学习动态Jquery表单验证的教程，但是我被卡住了，找不到我的错误。Chrome控制台告诉我未捕获引用错误：$未定义（我的js的第一行） 此代码应在我键入时进行验证。有人看到语法错误吗 JS $（函数（）{ /***********************************************************************************************/ /*定义一些正则表达式*/ /******************************

我试图学习动态Jquery表单验证的教程，但是我被卡住了，找不到我的错误。Chrome控制台告诉我未捕获引用错误：$未定义（我的js的第一行）

此代码应在我键入时进行验证。有人看到语法错误吗

JS

$（函数（）{
/***********************************************************************************************/
/*定义一些正则表达式*/
/***********************************************************************************************/
var expEmail=/^[[U a-z0-9-]+（\.[U a-z0-9-]+）*@[a-z0-9-]+（\.[a-z0-9-]+）*（\.[a-z]{2,4}）$/，
explatetersOnly=/^[a-zA-Z]+$/,，
解释数字=/^[a-zA-Z0-9]*$/；
/***********************************************************************************************/
/*用于检查字段是否具有正确的最小长度的函数*/
/***********************************************************************************************/
函数validateLength（fieldValue，minLength）{
//我们删除尾随空格和前导空格
返回（$.trim（fieldValue）.length>minLength）；
}
/***********************************************************************************************/
/*在键入时验证表单*/
/***********************************************************************************************/
$（“#rsgform1”）。在（“keyup”，“input.validate local”，function（）上{
validateField（$（this））；
});
/***********************************************************************************************/
/*验证字段的函数*/
/***********************************************************************************************/
函数验证字段（字段）{
var errorText=“”，
错误=错误，
value=field.val（），
兄弟姐妹=字段.兄弟姐妹（“.demo errors”）；
//测试为哪个字段发送
开关（field.attr（“name”））{
案例“名字”：
如果（！validateLength（值，2））{
错误=真；
errorText+=“名称太短！
”；
}
如果（！explottersOnly.test（值））{
错误=真；
errorText+=“名称只能包含字母和空格！”；
}
打破
案例“lastname”：
如果（！validateLength（值，2））{
错误=真；
errorText+=“用户名太短！
”；
}
如果（！explettersNumber.test（值））{
错误=真；
errorText+=“用户名只能包含字母数字字符！”；
}
打破
“性别”一案：
如果（值=“0”）{
错误=真；
errorText+=“请选择性别！”；
}
打破
案例“电子邮件”：
如果（！expEmail.test（值））{
错误=真；
errorText+=“电子邮件地址格式无效！”；
}
打破
}
//在字段下方显示错误消息
html（errorText）；
}
});
HTML


RSG联系我们
联系方式：

名字：
例如，John Smith，必须介于3到25个字符之间，仅限字母和空格



姓氏：
例如，John Smith，必须介于3到25个字符之间，仅限字母和空格



电邮：
例如Jsmith@gmail.com



电话：
例如1-444-555-6666


小狗信息：

姓名：
例如Sparky，必须介于3到25个字符之间，仅限字母和空格



品种：
例如，小猎犬、卷毛狗必须介于3到25个字符之间，仅限字母和空格



性别：
-选择一个值-
完整男性
绝育男性
完整的女性
绝育女性


所需服务：
我在找遛狗人！
我想买生的食物

我在找一个狗美容师！
我在找驯狗师！
问题及；评论
您的错误提示未包括jQuery库

将jquery.js放在脚本标记之前

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/script.js">

      //your code here

</script>


//你的代码在这里
您需要包括jQuery库您是否包括
jQuery
？如果可能，应在加载脚本之前通过
html
加载<代码>@NicholasHazel第一条评论是我的兄弟：PNo需要发动战争。程序员们团结起来：-）我投票给了你。安静点，哈哈。
（>'-'）>是的，jquery在本地和api中都包含。我还尝试将其包含在html文档中。浏览器正在读取jquery和我的validate.js文件….@Vynce82只想包含一个

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>RSG Contact Us</title>
     </head>
 <body>
  <div id="contactuscall">

   <form id="rsgform1" name="rsgform1" method="post" action="" novalidate>
    <fieldset id="field1">
      <legend id="legend1">Contact info:</legend>

       <p>
       <label  for="firstname">First name:</label>
       <input type="text" id="firstname" name="firstname" maxlength="25" class="validate-locally" />
       <span class="demo-input-info">E.g John Smith, must be between 3 and 25 characters, letters and space only</span>
       <span class="demo-errors"></span>
       </p>

       <p>
       <label for="lastname">Last name:</label>
       <input type="text" id="lastname" name="lastname" maxlength="25" class="validate-locally" />
       <span class="demo-input-info">E.g John Smith, must be between 3 and 25 characters, letters and space only</span>
       <span class="demo-errors"></span>
       </p>

       <p>
       <label for="email">E-mail:</label>
       <input type="text" id="email" name="email" maxlength="25" class="validate-locally" />
       <span class="demo-input-info">E.g Jsmith@gmail.com</span>
       <span class="demo-errors"></span>
       </p>

       <p>
       <label for="cellphone">Phone:</label>
       <input type="text" id="cellphone"  name="cellphone" maxlength="25" class="validate-locally" />
       <span class="demo-input-info">E.g 1-444-555-6666</span>
       <span class="demo-errors"></span>
       </p>
    </fieldset>

    <fieldset id="field2">
      <legend id="legend2">Doggie info:</legend>

       <p>
       <label for="dogname">Name:</label>
       <input type="text" id="dogname" name="dogname" maxlength="25" class="validate-locally" />
       <span class="demo-input-info">E.g Sparky, must be between 3 and 25 characters, letters and space only</span>
       <span class="demo-errors"></span>
       </p>

       <p>
       <label for="Breed">Breed:</label>
       <input type="text" id="Breed" name="Breed" maxlength="25" class="validate-locally" />
       <span class="demo-input-info">E.g Beagle, Poodle, must be between 3 and 25 characters, letters and space only</span>
       <span class="demo-errors"></span>
       </p> 

   <p>
   <label for="genDer">Gender:</label>
     <select name="genDer" maxlength="10" class="validate-locally">
                  <option value="">- Select a Value-</option>
                  <option  value="Intact Male"> Intact Male </option>
                  <option  value="Neutered Male"> Neutered Male </option>
                  <option  value="Intact Female"> Intact Female </option>
                  <option  value="Neutered Female"> Neutered Female </option>
     </select>
       <span class="demo-errors"></span>
          </p>   
    </fieldset>
    <fieldset id="field3">
          <legend id="legend3">Services Required:</legend>
          <input type="checkbox" name="reasoNwalk" value="walkSale" class="textfield"/>I'm looking for a Dog Walker!
          <input type="checkbox" name="reasoNfood" value="RawSale" class="textfield"/>I'm looking to purchase Raw Food!<br /> 
          <input type="checkbox" name="reasoNgroom" value="groomSale" class="textfield"/>I'm looking for a Dog Groomer!
          <input type="checkbox" name="reasoNtraining" value="trainingSale" class="textfield" />I'm looking for a Dog Trainer!
          <span class="error"></span>
    </fieldset>
    <fieldset id="field4">
        <legend id="legend4">Questions &amp; Comments</legend>
        <textarea rows="7" cols="90" id="freecomments" name="freecomments"></textarea>
    </fieldset>
      <!--<input id="submit" type="submit" name="submit" value="submit">-->
      <input  id="submit" type="submit" name="submit" value="submit">
   </form> 


<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="validate.js"></script>

 </body>
</html>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/script.js">

      //your code here

</script>