Question

您好朋友可以帮我验证验证问题。如何通过某些特定的条件获得jQuery验证。我试过但没有解决。请任何人解决这个正确的代码，其他人在这个问题上回答我。

<html>
<head>
<title>data for validation</title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
 <script src="jquery.validate.min.js" type="text/javascript"></script>
 <script>
 $(document).ready(function(){
     $("#frm").validate({
                 rules:{
                     username:{
                         required:true,
                         myupper:true
                     },

                     password:{
                         required:true,
                         minlength:3
                     },
                 },messages:{
                    username:{
                         required:"User Name Required"

                     },
                     password:{
                         required:"password Required",

                     },
                 }
 });
 });
 </script>
</head>
<body>
    <form action="" method="post" id="frm">
       <table border="1" align="center">
         <h1 align ="center" style="color:red">Registration form!!!</h1>
         <tr>
           <th>username</th>
           <td><input type="text" pattern="^([a-zA-Z0-9)$" maxlength="10" name="username" placeholder="Enter username"></td>
        </tr>
        <tr>
          <th>password</th>
          <td><input type="password" maxlength="10" name="password" placeholder="Enter password"></td>
        </tr>
        <tr>
        <tr>
           <td colspan="2" align="center"><input type="submit"  name="submit" value="submit"/></td>
        </tr>
     </table>
   </form>
</body>
</html>

Answer 1

尝试这样的事情：

$('#form_id').validate({
    rules:{
        name : 
        {
            required: true
        },
        email : 
        {
            required: true,
            email : true
        },
        and so on
    },
    messages:{
        name : 
        {
            required: "message"
        },
        email : 
        {
            required: "message",
            email : "message"
        }
    }
});

Documentation

Answer 2

<html>
<head>
<title>data for validation</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://www.geektantra.com/projects/jquery-form-validate/javascripts/jquery.validate.js" type="text/javascript"></script>
 
 
 <style>
      
.ErrorField {

    border: 1px solid #D00!important;

    color: #D00!important;

}

span.ValidationErrors {

    color: #F84B4B;

  

    font-size: 12px;   

    bottom:0px;
 
     position:relative; 

    

}
 </style>
<script type="text/javascript">
    $(function () {

        $("#username").validate({
            expression: "if (VAL) return true; else return false;",
            message: "First name is required"
        });
         $("#username").validate({
        expression: "if (VAL.match(/^[A-Z]*$/)) return true; else return false;",
        message: "Should be uppercase"

    });
         

        $("#password").validate({
            expression: "if (VAL) return true; else return false;",
            message: "Password is required"

        });
       

    });
</script>
</head>
<body>
<form action="" method="post" id="frm">
<table border="1" align="center">
<h1 align ="center" style="color:red">Registration form!!!</h1>
<tr>
<th>username</th>
<td><input type="text"  maxlength="10" name="username" id="username" placeholder="Enter username" onKeyUP="this.value = this.value.toUpperCase();"></td>
</tr>
<tr>
<th>password</th>
<td><input type="password" maxlength="10" name="password" placeholder="Enter password" id="password"></td>
</tr>
<tr>
<tr>
<td colspan="2" align="center"><input type="submit"  name="submit" value="submit"/></td>
</tr>
</table>
</form>

检查

通常需要该字段的id才能验证。

Answer 3

$.validator.addMethod("myupper", function(value, element) {
		return /^[A-Z ]*$/.test(value);
 }); 
 $(document).ready(function(){
	 $("#frm").validate({
		 rules:{
			 username:{
				 required:true,
				 myupper:true
			 },
			 password:{
				 required:true,
				 minlength:3
			 },
		 },messages:{
			username:{
				 required:"User Name Required",
				 myupper:"User Name must be Upper case" 

			 },
			 password:{
				 required:"password Required",
				 minlength: 'Minimum 3 characters required'
			 },
		 }
	});
 });

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js" type="text/javascript"></script>
<form action="" method="post" id="frm">
       <table border="1" align="center">
         <h1 align ="center" style="color:red">Registration form!!!</h1>
         <tr>
           <th>username</th>
           <td><input type="text" pattern="^([a-zA-Z0-9)$" maxlength="10" name="username" placeholder="Enter username"></td>
        </tr>
        <tr>
          <th>password</th>
          <td><input type="password" maxlength="10" name="password" placeholder="Enter password"></td>
        </tr>
        <tr>
        <tr>
           <td colspan="2" align="center"><input type="submit"  name="submit" value="submit"/></td>
        </tr>
     </table>
   </form>

您需要使用addMethod和regex为大写添加自定义验证方法，如下所示：

<script>
 $(document).ready(function(){

     // add custom method
     $.validator.addMethod("myupper", function(value, element) {
            return /^[A-Z ]*$/.test(value);
     }); 

     $("#frm").validate({
                 rules:{
                     username:{
                         required:true,
                         myupper:true
                     },

                     password:{
                         required:true,
                         minlength:3
                     },
                 },messages:{
                    username:{
                         required:"User Name Required",
                         myupper:"User Name must be Upper case" // custom method error message

                     },
                     password:{
                         required:"password Required",
                         minlength: 'Minimum 3 characters required'
                     },
                 }
 });
 });
 </script>

希望这会有所帮助

如何实现jquery验证

3 个答案: