0

我不理解对“全名”字段进行验证..

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

  • 只允许使用字母 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>


已编辑： - 全名（名字和姓氏 - 两者都使用一个字段），

4

1 回答 1

1

您在这里有两个问题：

  1. 如何根据您的规则验证全名。
  2. 如何添加自定义 jQuery 验证器验证规则。

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

下面是验证字段的全名值为“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：

<form id="signup" action="/action">
    <input name="fullname" type="text" />
    <input type="submit">
</form>​

演示：jsfiddle

参考：jQuery Validate Plugin - 如何创建简单的自定义规则？

如何根据您的规则验证全名

$(document).ready(function() {

    var validCharactersRegex = new RegExp(/^[a-zA-Z0-9 -]+$/);
    var doesNotStartWithDashOrSpace = new RegExp(/^[^ -]/);
    var fullname_invalid = function(value) {
        return validCharactersRegex.test(value) && doesNotStartWithDashOrSpace.test(value) && value.indexOf('  ') == -1 && value.indexOf('--') == -1 && value.indexOf(' -') == -1 && value.indexOf('- ') == -1;
    }


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

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

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

演示：jsfiddle

于 2012-12-12T15:58:51.997 回答