Javascript 如何在jquery验证程序规则中使用正则表达式代码_Javascript_Jquery_Html

Javascript 如何在jquery验证程序规则中使用正则表达式代码

javascript jquery html

Javascript 如何在jquery验证程序规则中使用正则表达式代码,javascript,jquery,html,Javascript,Jquery,Html,我不了解如何对“全名”字段进行验证下面是“全名”字段所需的验证： $('#fullName').blur(function(){ var input = $('#fullName').val(); if( !/[^a-z0-9 -]/.test(input) && / /.test(input) && /-/.test(input) &&

我不了解如何对“全名”字段进行验证

下面是“全名”字段所需的验证：

$('#fullName').blur(function(){


            var input = $('#fullName').val();
            if(  !/[^a-z0-9 -]/.test(input)  &&     
                 / /.test(input) && /-/.test(input)  &&  
                 !/^[ |-]|[ |-]$/.test(input)  &&      
                 !/ -|- |--|  /.test(input))
            {
                 $('.error').remove();
            }
            else{
                 $('#fullName')
                     .after('<span class="error">Your Name should be entered like:  "blahblah" </span>');
            }

    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>

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

  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

<script type="text/javascript" src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.1.pack.js"></script>


 <script>

$(document).ready(function(){


 $("#fullname").focus();

  $("#fullname").addMethod("alphanumeric", function(value, element) {
    return ! $("#fullname").methods.required(value, element) || /^[a-zA-Z0-9_]+$/i.test(value);
} , "Letters, numbers or underscores only please"); 




      $("#ourform").validate({
        onfocusout: function(element) { $(element).valid(); } ,
        rules: {
            fullname : {
              required: true,
              maxlength: 14,
              alphanumeric : false
            },                  
            email: {
              required: true,
              email: true
            }
        },
        messages: {
            fullname : {
              required: "Please specify your Full Name",
              maxlength:  "Please enter only upto 14 characters",
              alphanumeric : "do not enter alphanumeric"
            },
            email: {
              required: "We need your email address to contact you",
              email: "Your email address must be in the format of name@domain.com"
            }
        }
      });



   });



  </script>



<style>

.error {color: red;}

</style>


 </head>

 <body>




<form id="ourform" method="get" action="">

       <fieldset>

           <p>
             <label for="fullname">Full Name</label>
             <em>*</em><input id="fullname" name="fullname" size="25" class="required"  maxlength="14" />
           </p>


           <p>
             <label for="email">Email</label>
             <em>*</em><input id="email" name="email" size="25"  class="required email" />
           </p>



     </fieldset>

  </form>



 </body>
</html>

仅字母a至z（小写）、“-”（破折号或连字符）和“ （空间）是允许的
必须输入“-”（破折号）和“（空格）字母
“—”或“”字母不能是第一个或最后一个信上写着
“-”不得是近邻或相邻（之前或之后）至“
-“或”不能是其自身的近邻（相邻）

我知道我可以这样做：

$('#fullName').blur(function(){


            var input = $('#fullName').val();
            if(  !/[^a-z0-9 -]/.test(input)  &&     
                 / /.test(input) && /-/.test(input)  &&  
                 !/^[ |-]|[ |-]$/.test(input)  &&      
                 !/ -|- |--|  /.test(input))
            {
                 $('.error').remove();
            }
            else{
                 $('#fullName')
                     .after('<span class="error">Your Name should be entered like:  "blahblah" </span>');
            }

    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>

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

  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

<script type="text/javascript" src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.1.pack.js"></script>


 <script>

$(document).ready(function(){


 $("#fullname").focus();

  $("#fullname").addMethod("alphanumeric", function(value, element) {
    return ! $("#fullname").methods.required(value, element) || /^[a-zA-Z0-9_]+$/i.test(value);
} , "Letters, numbers or underscores only please"); 




      $("#ourform").validate({
        onfocusout: function(element) { $(element).valid(); } ,
        rules: {
            fullname : {
              required: true,
              maxlength: 14,
              alphanumeric : false
            },                  
            email: {
              required: true,
              email: true
            }
        },
        messages: {
            fullname : {
              required: "Please specify your Full Name",
              maxlength:  "Please enter only upto 14 characters",
              alphanumeric : "do not enter alphanumeric"
            },
            email: {
              required: "We need your email address to contact you",
              email: "Your email address must be in the format of name@domain.com"
            }
        }
      });



   });



  </script>



<style>

.error {color: red;}

</style>


 </head>

 <body>




<form id="ourform" method="get" action="">

       <fieldset>

           <p>
             <label for="fullname">Full Name</label>
             <em>*</em><input id="fullname" name="fullname" size="25" class="required"  maxlength="14" />
           </p>


           <p>
             <label for="email">Email</label>
             <em>*</em><input id="email" name="email" size="25"  class="required email" />
           </p>



     </fieldset>

  </form>



 </body>
</html>

$（'#全名'）.blur（函数（）{
变量输入=$（'#全名'）.val（）；
如果（！/[^a-z0-9-]/.测试（输入）和
//.测试（输入）和&/-/.测试（输入）和
！/^[|-]|[|-]$/。测试（输入）和
！/-|-|-|/.test（输入））
{
$（'.error'）.remove（）；
}
否则{
$（“#全名”）
.after（'您的名字应输入为“blahblah”'）；
}
});

但我不明白如何在此处插入上述正则表达式代码：

$('#fullName').blur(function(){


            var input = $('#fullName').val();
            if(  !/[^a-z0-9 -]/.test(input)  &&     
                 / /.test(input) && /-/.test(input)  &&  
                 !/^[ |-]|[ |-]$/.test(input)  &&      
                 !/ -|- |--|  /.test(input))
            {
                 $('.error').remove();
            }
            else{
                 $('#fullName')
                     .after('<span class="error">Your Name should be entered like:  "blahblah" </span>');
            }

    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>

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

  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

<script type="text/javascript" src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.1.pack.js"></script>


 <script>

$(document).ready(function(){


 $("#fullname").focus();

  $("#fullname").addMethod("alphanumeric", function(value, element) {
    return ! $("#fullname").methods.required(value, element) || /^[a-zA-Z0-9_]+$/i.test(value);
} , "Letters, numbers or underscores only please"); 




      $("#ourform").validate({
        onfocusout: function(element) { $(element).valid(); } ,
        rules: {
            fullname : {
              required: true,
              maxlength: 14,
              alphanumeric : false
            },                  
            email: {
              required: true,
              email: true
            }
        },
        messages: {
            fullname : {
              required: "Please specify your Full Name",
              maxlength:  "Please enter only upto 14 characters",
              alphanumeric : "do not enter alphanumeric"
            },
            email: {
              required: "We need your email address to contact you",
              email: "Your email address must be in the format of name@domain.com"
            }
        }
      });



   });



  </script>



<style>

.error {color: red;}

</style>


 </head>

 <body>




<form id="ourform" method="get" action="">

       <fieldset>

           <p>
             <label for="fullname">Full Name</label>
             <em>*</em><input id="fullname" name="fullname" size="25" class="required"  maxlength="14" />
           </p>


           <p>
             <label for="email">Email</label>
             <em>*</em><input id="email" name="email" size="25"  class="required email" />
           </p>



     </fieldset>

  </form>



 </body>
</html>


$（文档）.ready（函数（）{
$（“#全名”）.focus（）；
$（“#全名”）.addMethod（“字母数字”，函数（值，元素）{
return！$（“#全名”）.methods.required（值，元素）|/^[a-zA-Z0-9|]+$/i.test（值）；
}，“请仅限字母、数字或下划线”）；
$（“#我们的表单”）。验证({
onfocusout:函数（元素）{$（元素）.valid（）；}，
规则：{
全名：{
要求：正确，
最大长度：14，
字母数字：false
},                  
电邮：{
要求：正确，
电子邮件：真的
}
},
信息：{
全名：{
必填：“请指定您的全名”，
maxlength:“请最多输入14个字符”，
字母数字：“不要输入字母数字”
},
电邮：{
必填：“我们需要您的电子邮件地址与您联系”，
电子邮件：“您的电子邮件地址的格式必须为name@domain.com"
}
}
});
});
.错误{颜色：红色；}

全名
*


电子邮件
*

编辑：

-全名（名字和姓氏-使用一个字段表示两者），

这里有两个问题：

如何根据规则验证全名

如何添加自定义jQuery验证程序验证规则

如何添加自定义jQuery验证程序验证规则以下是验证字段是否具有fullname的值“Mark”的示例：

$(document).ready(function() {
    var fullname_invalid = function(value) {
        return value === "Mark";
    }


    $.validator.addMethod("custom_fullname", function(value, element) {
        return fullname_invalid(value);
    }, 'Your Name should be entered like: "Mark"');

    $('#signup').validate({
        rules: {
            fullname: {
                required: true,
                custom_fullname: true
            }
        }
    });

    $('#signup').on('submit', function(event) {
        event.preventDefault();
    });
});

HTML:

演示：

Dos$.validator.addMethod（“字母数字”表示$（“#全名”）.addMethod（“字母数字”？？否。它向验证器中添加了一个验证规则，您可以在任何字段上使用。您可以使用

验证调用中的规则将其连接到特定字段。这会让人困惑，但请尝试演示并使用它。顺便说一句，您应该为自定义规则使用好的规则名称。字母数字之类的名称可能太通用了。此外，您还可以使用更具体的错误将每个全名规则分离到单独的验证中。或者您可以将它们保存在一个大的验证方法中，如图所示。实际上，理解演示似乎需要更多的时间，因为首先我不太了解Javascript或jquery。这两种方法都很新。问题是的，我没有足够的时间去理解、练习和写作。你在这方面似乎很有经验，如果你不介意的话，请你现在就给我写一个代码。请不要认为我错了，兄弟。你很有帮助。你说什么？@Clarsen我不能，但你可以从演示中复制和粘贴，并适应你的表格。很好运气好。如果遇到问题，您可以随时发布更多问题。@clarsen您可以检查以下内容吗：，全名字段不符合我的要求。。它还需要检查每个字段是否为“onblur”