一个简单的 jQuery 表单验证脚本 [关闭]

Posted 2023-05-09

【中文标题】一个简单的 jQuery 表单验证脚本 [关闭]

【英文标题】：A simple jQuery form validation script [closed]

【发布时间】：2013-02-10 04:51:37

【问题描述】：

我使用 jQuery 制作了一个简单的验证表单。它工作正常。问题是我对我的代码不满意。有没有其他方法可以用相同的输出结果编写我的代码？

$(document).ready(function()

$('.submit').click(function()
    validateForm();   
);

function validateForm()

    var nameReg = /^[A-Za-z]+$/;
    var numberReg =  /^[0-9]+$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]2,4)?$/;

    var names = $('#nameInput').val();
    var company = $('#companyInput').val();
    var email = $('#emailInput').val();
    var telephone = $('#telInput').val();
    var message = $('#messageInput').val();

    var inputVal = new Array(names, company, email, telephone, message);

    var inputMessage = new Array("name", "company", "email address", "telephone number", "message");

     $('.error').hide();

        if(inputVal[0] == "")
            $('#nameLabel').after('<span class="error"> Please enter your ' + inputMessage[0] + '</span>');
         
        else if(!nameReg.test(names))
            $('#nameLabel').after('<span class="error"> Letters only</span>');
        

        if(inputVal[1] == "")
            $('#companyLabel').after('<span class="error"> Please enter your ' + inputMessage[1] + '</span>');
        

        if(inputVal[2] == "")
            $('#emailLabel').after('<span class="error"> Please enter your ' + inputMessage[2] + '</span>');
         
        else if(!emailReg.test(email))
            $('#emailLabel').after('<span class="error"> Please enter a valid email address</span>');
        

        if(inputVal[3] == "")
            $('#telephoneLabel').after('<span class="error"> Please enter your ' + inputMessage[3] + '</span>');
         
        else if(!numberReg.test(telephone))
            $('#telephoneLabel').after('<span class="error"> Numbers only</span>');
        

        if(inputVal[4] == "")
            $('#messageLabel').after('<span class="error"> Please enter your ' + inputMessage[4] + '</span>');
               
   

);

【问题讨论】：

是的，你可以使用 jquery 验证脚本让它变得更好。

codereview.stackexchange.com - 这就是你要找的东西

可以使用html5表单验证：$('form')[0].checkValidity()

如果主要关注简单，valijate jquery 插件很有前途。它是一个启动插件。但是，它使用了一些有趣的验证方式。这是那里指南的链接。 valijate.com/Docs.php

将电子邮件验证正则表达式更新为： var emailReg = /^(([^()[]\\.,;:\s@"]+(\.[^( )[]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]1,3\.[0-9]1, 3\.[0-9]1,3\.[0-9]1,3])|((([a-zA-Z\-0-9]+\.)+[a -zA-Z]2,))$/;

【参考方案1】：

您可以简单地使用the jQuery Validate plugin，如下所示。

jQuery：

$(document).ready(function () 

    $('#myform').validate( // initialize the plugin
        rules: 
            field1: 
                required: true,
                email: true
            ,
            field2: 
                required: true,
                minlength: 5
            
        
    );

);

HTML：

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

演示：http://jsfiddle.net/xs5vrrso/

选项： http://jqueryvalidation.org/validate

方法： http://jqueryvalidation.org/category/plugin/

标准规则：http://jqueryvalidation.org/category/methods/

可选规则可用于additional-methods.js file：

maxWords
minWords
rangeWords
letterswithbasicpunc
alphanumeric
lettersonly
nowhitespace
ziprange
zipcodeUS
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
phonesUK
postcodeUK
strippedminlength
email2 (optional TLD)
url2 (optional TLD)
creditcardtypes
ipv4
ipv6
pattern
require_from_group
skip_or_fill_minimum
accept
extension

【参考方案2】：

您可以为此使用 jquery 验证器，但您需要为此添加 jquery.validate.js 和 jquery.form.js 文件。在包含验证器文件之后定义你的验证是这样的。

<script type="text/javascript">
$(document).ready(function()
    $("#formID").validate(
    rules :
        "data[User][name]" : 
            required : true
        
    ,
    messages :
        "data[User][name]" : 
            required : 'Enter username'
        
    
    );
);
</script>

您可以看到required : true 同样还有更多属性，例如电子邮件，您可以将email : true 定义为数字 number : true

【讨论】：

jQuery 验证器很好，但我认为考虑到新的 HTML5 验证功能的验证器会更好，例如ericleads.com/h5validate.

@MattB.，从来没有听说过那个，但是jQuery Validate plugin also takes HTML5 features into account，虽然我不确定你为什么需要/想要同时使用这两个。

Devang，jquery.form.js 是不需要使用您显示的代码。

@Sparky 除非您已经为验证消息设计了一种您真正喜欢的特定美学，否则允许支持 HTML5 的浏览器以默认方式显示验证消息通常会更好，验证插件只能获得用作在旧浏览器上显示错误消息的后备，以及 HTML5 不支持的验证逻辑（没有额外的 Javascript）。但这只是我个人的喜好。

@MattB.，通常情况下，使用 jQuery 的人希望通过摆脱因品牌而异的浏览器功能而获得的跨浏览器一致性。我也更喜欢坚持使用具有大量支持基础的流行插件，如果the developer is also part of the jQuery Team，那就更好了，IMO。