如何将javabean与jquery验证插件结合起来?

时间:2015-09-02 15:15:23

标签: java jquery web-applications jquery-validate

我正在构建一个用户可以注册的网络应用。我有一个注册表单的jquery验证方法。 我需要的是根据我的数据库验证用户名的可用性。 我不允许使用php来做这个,所以我需要使用java,一个javabean为那个原因。 我怎么能像这样结合jquery和java?我应该使用"遥控器"来自jquery的命令还是将验证与另一个函数结合起来? 如果名称已经存在n数据库我不希望我的表单提交。

Signup.xhtml

someMethod

validate.js

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TODO supply a title</title>

        <link rel="stylesheet" type="text/css" href="newcss.css" />
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"></link>
        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
        <script src="jquery.js" type="text/javascript"></script>
         <script src="//code.jquery.com/jquery-1.9.1.js"></script>
         <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js" type="text/javascript"></script>       
        <script src="validate.js" type="text/javascript"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>

        <div id="container" align="center">
        <h2>User Registration</h2>
        <form action="welcome.xhtml" method="post" id="contact_form">

            <div>
                <label for="name">Name</label>
                <input id="name" type="text" name="name"/>
                <span id="nameInfo"></span>
            </div>

            <div >
                <label for="email" >Email</label>
                <input id="email" type="text" name="email"/>
                <span id="emailInfo"></span>
            </div>

            <div>
                <label for="password">password</label>
                <input id="password" type="password" name="pass1"/>
                <span id="pass1Info"></span>
            </div>

            <div>
                <label for="confirm">confirm password</label>
                <input id="confirm" type="password" name="pass2"/>
                <span id="pass2Info"></span>
            </div>

            <div>
                <label for="message">Message</label>
                <textarea id="message" name="message"/>
                <span id="messageInfo"></span>
            </div>

            <div>
                <input id="send" name="send"  type="submit" value="Send"/>
            </div>

            <br/>
<!--            <p>Already registered? <a href="/login">Sign in</a>.</p>        -->
        </form>
        </div>
    </body>
</html>

CheckAvailability.java(我插入为js,因为它不会保留其格式)

$(document).ready(function () {

    //Validation rules for form
    $("#contact_form").validate({
        // Specify the validation rules
        rules: {
            name: {
                required: true
//                remote: ???
            },

            password: {
                required: true,
                minlength: 5
            },

            confirm: {
                required: true,
                equalto: "#password"
            },

            email: {
                required: true,
                email: true
            }
        },

        // Specify the validation error messages
        messages: {
            name: "Please enter your name",

            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },

            confirm:{
                equalto: "Passwords are not matching"
            },

            email: "Please enter a valid email address"
        },

        submitHandler: function (form) {
            form.submit();
        }
    });
});

0 个答案:

没有答案