如何实现jquery验证

how to impliment jquery validation

本文关键字：jquery 验证 实现 何实现      更新时间：2023-09-26

朋友们，你们能帮我解决一下验证问题吗?如何获得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>

试试这样做:

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

<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进行验证

$.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>

希望对大家有所帮助

相关文章：