如何使用jquery验证表单？

Question

我使用以下代码创建了一个注册表单：

HTML：

<td class="fontstyle">
    Customer Name
    <span></span>
</td>
<td class="fontstyle">
    <input type="text" name="name" id="name">
</td>

jQuery的：

$(document).ready(function () {
    if ($("#name").val('')) {
    }
    $('#name').focus(function () {
        if ($('#name').val() == 'Name Please') {
            $('#name').val("");
        }
    });
    $('#name').blur(function () {
        var nameRegex = /^[A-Za-z]+$/;
        // var fname = document.getElementById("name").value;
        var fname = $("#name").val();
        alert(nameRegex.test(fname));

        if (!(nameRegex.test(fname))) {
            $("#name").removeClass('greenborder').addClass('redborder');

        } else if (fname == " ") {
            $("#name").removeClass('greenborder').addClass('redborder');
        } else {
            $("#name").removeClass('redborder').addClass('greenborder');
            return false;
        }
    });
});

这是我的jsfiddle - http://jsfiddle.net/Mf6zJ/352/

我已经验证了Name的表单。但我不想提醒true和false。

我想在Name附近this name is not valid显示消息。

请检查我的jsfiddle并给我建议。

Answer 1

这是一个简单的例子，

 Customer Name : <input type="text" name="name" id="name">
 <span id="errormsg" style="display:none;">Enter a Valid Name</span>
    <button type="submit" id="submit">Submit</button>


   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#submit").click(function() {
var name = $("#name").val();

if(name.length < 1){
   $("#errormsg").css({"display":"block" , "color":"red"}); //add style you want
   return false;
 }else{
      $("#errormsg").css({"display":"none"});
}
    });
});

</script>

工作演示：http://jsfiddle.net/Mf6zJ/357/

Answer 2

这里有一个使用 jqueryvalidation 的例子：

<script>
$.validator.setDefaults({
    submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
    // validate the comment form when it is submitted
    $("#commentForm").validate();

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        }
    });

    // propose username by combining first- and lastname
    $("#username").focus(function() {
        var firstname = $("#firstname").val();
        var lastname = $("#lastname").val();
        if(firstname && lastname && !this.value) {
            this.value = firstname + "." + lastname;
        }
    });

    //code to hide topic selection, disable for demo
    var newsletter = $("#newsletter");
    // newsletter topics are optional, hide at first
    var inital = newsletter.is(":checked");
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
    var topicInputs = topics.find("input").attr("disabled", !inital);
    // show when newsletter is checked
    newsletter.click(function() {
        topics[this.checked ? "removeClass" : "addClass"]("gray");
        topicInputs.attr("disabled", !this.checked);
    });
});
</script>