JQuery和验证插件

Question

JQuery和验证插件

3

我觉得使用JQuery而不是自己编写验证代码更好，但我也发现这并不容易。我有几个问题，希望有人能回答。首先，错误消息只在我点击提交按钮后才出现。如何让它们在离开每个字段后就出现？以下是我的验证代码。

代码：

$(document).ready(function(){
    $("#orderForm").validate({
        rules: {
            shipFirstName: {
                required: true,
            },
            shipFamilyName: {
                required: true,
            },
            shipPhoneNumber: {
                required: true,
            },
            shipStreetName: {
                required: true,
            },
            shipCity: {
                required: true,
            },
            billEmailAddress: {
                required: true,
            },
            billPhoneNumber: {
                required: true,
            },
            billCardNumber: {
                required: true,
            },
            billCardType: {
                required: true,
            },
        }, //end of rules
    }); // end of validate
    }); //end of function

这是我的表单HTML代码。我不会展示样式，但我已将它更改为显示红色字体。

代码：

<form id="orderForm" method="post" action="x">
      <table id="formTable" cellpadding="5">
        <tr>
          <td>
            <h3>Shipping and Billing Information</h3>
          </td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><label for="shipFirstname">First Name</label></td>
          <td><input id="shipFirstName" type="text" name="shipFirstName" maxlength=
          "30" /></td>
        </tr>
        <tr>
          <td><label for="shipFamilyName">Surname</label></td>
          <td><input id="shipFamilyName" type="text" name="shipFamilyName" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipPhoneNumber">Contact Telephone Number</label></td>
          <td><input id="shipPhoneNumber" type="text" name="shipPhoneNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipStreetName">Street Name</label></td>
          <td><input id="shipStreetName" type="text" name="shipStreetName" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipCity">City</label></td>
          <td><input id="shipCity" type="text" name="shipCity" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipPostalCode">Postal Code</label></td>
          <td><input id="shipPostalCode" type="text" name="shipPostalCode" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billEmailAddress">Email address</label></td>
          <td><input id="billEmailAddress" type="text" name="billEmailAddress" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billPhoneNumber">Contact Telephone Number</label></td>
          <td><input id="billPhoneNumber" type="text" name="billPhoneNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="fidelityCardNumber">Fidelity card</label></td>
          <td><input id="fidelityCardNumber" type="text" name="fidelityCardNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billCardNumber">Credit Card Number</label></td>
          <td><input id="billCardNumber" type="text" name="billCardNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billCardType">Credit Card Type</label></td>
          <td><select id="billCardType" name="billCardType">
            <option value="...">
              Choose your card...
            </option>
            <option value="visa">
              Visa
            </option>
            <option value="mastercard">
              Mastercard
            </option>
          </select></td>
        </tr>
        <tr>
          <td><label for="instructions">Instructions</label></td>
          <td>
          <textarea id="instructions" name="instructions" rows="8" cols="30">
Enter your requirements here or comments.
</textarea></td>
        </tr>
        <tr>
          <td colspan="2"><input id="submit" type="submit" name="Submit" value="Submit" </td>
        </tr>
      </table>
    </form>

我还想在邮编和忠诚卡上使用正则表达式。我该如何将它们合并到脚本中？这样做对吗？我应该把它放在哪里？

$.validator.addMethod('shipPostalCode', function (value) {
    return /^[A-Z]{2}\d{1,2}\s\d{1,2}[A-Z]{2}$/.test(value);
    }, 'Please enter a valid Postal Code');
    $.validator.addMethod('fidelityCardNumber', function (value) {
    return /^[A-Z]{1}([A-Z]|\d){4}\s?([A-Z]|\d){5}\s?([A-Z]|\d){3}\d{1}(\!|\&|\@|\?){1}$/.test(value);
    }, 'Please enter a valid card number');

最后一个问题，这个脚本可以很容易地放在外部js文件中吗？我正在尽可能从html文件中获取更多内容。

谢谢

- Pocket

是的，您可以很容易地将其添加到外部JS文件中。至于使其工作，我尚未尝试使用jQuery进行表单验证。只是浏览文档，似乎您可以在表单字段上使用onfocusout，在复选框和单选按钮上使用onclick。抱歉我无法提供更多帮助。 - Aduljr

我已经解决了关于在单击字段外时错误消息未显示的问题。我使用了以下代码：$（“...”）。validate（{ onfocusout：function（element）{ this.element（element）; } }）; 但是，我仍然卡在自定义方法上，需要使用正则表达式。 - Pocket

6个回答

1

关于添加自己的验证方法，请查看http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage

您可能还想尝试使用这种方法：

jQuery.validator.addClassRules({
  name: {
    required: true,
    minlength: 2
  },
  zip: {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  }
});

从示例http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#rules中可以看出，

http://docs.jquery.com/Plugins/Validation最近还说明您也可以像这样进行验证。

这样做对你来说会更干净，需要编写的 JS 也更少。

- Justin Johnson

1

通过使用“addMethod”调用，您实际上正在添加一种验证“类型”，该类型可以在主“validate”方法调用中使用。

$.validator.addMethod('postalCode', 
    function (value, element) 
    {
          return this.optional(element) || /^[A-Z]{2}\d{1,2}\s\d{1,2}[A-Z]{2}$/.test(value);
    }, 'Please enter a valid Postal Code');


$.validator.addMethod('creditCardNumber', 
    function(value, element) 
    {
        return this.optional(element) || /^[A-Z]{1}([A-Z]|\d){4}\s?([A-Z]|\d){5}\s?([A-Z]|\d){3}\d{1}(\!|\&|\@|\?){1}$/.test(value);
    }, 'Please enter a valid card number');

将此代码放入与其他验证代码相同的JS文件中。

然后，修改您的验证方法调用为：

$(document).ready(function(){
    $("#orderForm").validate({

        rules: {

                    //Your other rules

                    shipPostalCode: { postalCode: true },
                    fidelityCardNumber : { creditCardNumber : true }

                }

    })
   }
 );

- SolutionYogi

1

这应该可以工作，但你首先必须填写表单中的某些内容。尝试在名字栏中输入一些内容，然后删除它并改变焦点。

- Daniel Moura

你是说我的脚本应该工作还是aduljr的解决方案？我已经按照你说的做了，但除非你点击提交，否则它仍然无法工作。 - Pocket

0

$('#myform').validate({ onfocusout: function(element) { $(element).valid(); } };

这个也可以工作。

- Alistair

0

jQuery.validator.addMethod("stateUS", function(value, element) {
    return this.optional(element) ||
    /^(?:A[KLRZ]|C[AOT]|D[CE]|FL|GA|HI|I[ADLN]|K[SY]|LA|M[ADEINOST]|N[CDEHJMVY]|O[HKR]|PA|RI|S[CD]|T[NX]|UT|V[AT]|W[AIVY])*$/.test(value);
}, "The specified US State is invalid");`

用于验证美国各州和华盛顿特区的两个字母缩写。

想评论上面的内容，但声望不够 - Salty的答案建议使用

onfocusout: true

然而，根据文档（并尝试过），那不是一个有效的设置。 http://jqueryvalidation.org/validate

布尔值true不是一个有效的值。

如果您将真实性设置为该值，则需要设置一个回调函数，该函数获取两个参数element和event - 就像Alistair的答案一样。

- jdforsythe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Salty · Accepted Answer

$(document).ready(function(){ $("#orderForm").validate({ onfocusout: true, rules: { shipFirstName: { required: true, }, shipFamilyName: { required: true, }, shipPhoneNumber: { required: true, }, shipStreetName: { required: true, }, shipCity: { required: true, }, billEmailAddress: { required: true, }, billPhoneNumber: { required: true, }, billCardNumber: { required: true, }, billCardType: { required: true, }, }, //规则结束 }); // 验证结束 }); //函数结束

这样，每次离开一个字段时，它都会自动验证。 :)