Question

我是jQuery的新手，我试图从jQuery创建一个验证表单，它似乎不起作用。 jQuery表单看起来很正常，我的表单中有引导程序。我把它放在JSFiddle中，当我点击提交时它给了我一个错误。：P

<form action="" method="POST" class="form-horizontal" id="registerForm">
<div class="form-group">
    <label class="control-label col-sm-2" for="email">Username:</label>
<div class="col-sm-10">
    <input type="username" class="form-control" name="username" placeholder="Enter username" id="username" required />
</div>
</div>
<div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
    <input type="email" class="form-control" name="email" placeholder="Enter email" id="email" required />
</div>
</div>
<div class="form-group">
    <label class="control-label col-sm-2" for="email">Password:</label>
<div class="col-sm-10">
    <input type="password" class="form-control" name="password" placeholder="Enter password" id="password" required />  
</div>
</div>
<div class="form-group">
    <label class="control-label col-sm-2" for="email">Confirm Password:</label>
<div class="col-sm-10">
    <input type="password" class="form-control" name="confirmpassword" placeholder="Confirm Password" id="confirmpassword" required />
</div>
</div>                       
<div class="checkbox">
    <label><input type="checkbox" name="checkbox">Click it</label>
</div>
<div class="form-group"> 
<div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default" id="registersubmit">Submit</button>
</div>
</div>

我的jQuery代码

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {

$('#registerForm').validate({
    rules: {
        username: {
            required: true,
            minlength: 5,
            maxlength: 20
        },
        email: {
            required: true,
            minlength: 5,
            maxlength: 255,
            email: true
        },
        password: {
            required: true,
            minlength: 5,
            maxlength: 30
        },
        confirmpassword: {
            required: true,
            equalTo: '#password'
        }
    },
    messages: {
        username: {
            required: 'You must enter a username',
            minlength: 'Your username is too short',
            maxlength: 'Your username is too long'
        },
        email: {
            required: 'You must enter a email',
            minlength: 'Your email is too short',
            email: 'Please enter a valid email address'
        },
        password: {
            required: 'You must enter a password',
            minlength: 'Your password is too short',
            maxlength: 'Your password is too long'
        },
        confirmpassword: {
            required: 'You must confirm your password',
            equalTo: 'You password does not match'
        }
    }
});

}）;

Answer 1

validate()方法由this jQuery validation plugin提供，您可以通过＆＃34;外部资源＆＃34;将其添加到您的jsfiddle;左边的小组。

jQuery验证表似乎确实有效

1 个答案: