Question

我想用html和jquery验证创建一个没有验证插件的页面

我的需要名称只接受字符，否则显示错误消息电子邮件应仅xxx@gg.com格式，否则只显示错误消息年龄在18到25之间，否则显示错误消息电话号码接受10位数，否则显示错误消息

我已经在使用.click(function{ 和数字的长度

＆＃13;

<!Doctype Html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
$(document).ready(function()
{
	$("submit").click(function()
	{ 
		// name is storing in variable
		var uname = $("#name").val();
		 //validating name
		 if ( $("#uname").val().match('^[a-zA-Z]{3,16}$') ) 
		    {
		    	document.getElementById("ename").innerHTML = "Please enter valid name";
		    }

		//mail id is storing in variable
		var mailid = $("mail").val();
         //validating mail id
         if (mailid) 
        	{

        	};
        // phone no is storing in variable	
        var phoneno = $("phone").val();
          //validating number
          if($.isNumeric($('#EmpNum').val())
          if (phoneno.lenth<0||phoneno.lenth>10) 
          	{
                
          	};
        // age is storing in variable
        var cage = $("age").val();
          //validating age
          if (age<18||age>25) 
          {
            document.getElementById("demo").innerHTML = res;
          };   	
	});
});
</script>	
</head>
<body>
  <table align="center">
  	<tr>
  		<td>
  			Enter the name
  		</td>
  		<td>
  			<input type="text" id="name">
  		</td>
  		<td>
  			<span id="ename"></span>
  		</td>
  	</tr>
    <tr>
  		<td>
  			Enter the E-mail
  		</td>
  		<td>
  			<input type="text" id="mail">
  		</td>
  		<td>
  			<span id="eemail"></span>
  		</td>
  	</tr>
  	<tr>
  		<td>
  			Enter the age
  		</td>
  		<td>
  			<input type="text" id="age">
  		</td>
  		<td>
  			<span id="eage"></span>
  		</td>
  	</tr>
  	<tr>
  		<td>
  			Enter the phone no
  		</td>
  		<td>
  			<input type="text" id="phone">
  		</td>
  		<td>
  			<span id="ephone"></span>
  		</td>
  	</tr>
  	<tr>
  		<td>
  			
  		</td>
  		<td>
  			<input type="submit" id="submit" value="Send">
  		</td>
  	</tr>
  </table>	
</body>
</html>

＆＃13;

Answer 1

1. jQuery中的ID选择器必须以#为前缀 2。var uname = $("#name").val();给出名称的值。所以此$("#uname").val()无效 3.检查一次How to Use jQuery Selectors
4.使用数字时，必须按照要求解析它们（int或float）。

工作守则。

＆＃13;

$(document).ready(function() {
  $("#submit").click(function() {
    // name is storing in variable
    var uname = $("#name").val();
    //validating name
    if (!uname.match('^[a-zA-Z]{3,16}$')) {
      document.getElementById("ename").innerHTML = "Please enter valid name";
    }

    //mail id is storing in variable
    var mailid = $("#mail").val();
    //validating mail id
    if (!mailid) {
      $('#eemail').text('Email is requried.')
    };
    // phone no is storing in variable	
    var phoneno = $("#phone").val();
    //validating number
    if ($.isNumeric($('#EmpNum').val()))
      if (phoneno.lenth < 0 || phoneno.lenth > 10) {

      };
      // age is storing in variable
    var cage = parseInt($("#age").val());
    //validating age
    if (cage < 18 || cage > 25) {
      document.getElementById("eage").innerHTML = "Age must be between 18 to 25";
    };
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <table align="center">
    <tr>
      <td>Enter the name</td>
      <td>
        <input type="text" id="name" />
      </td>
      <td>
        <span id="ename"></span>
      </td>
    </tr>
    <tr>
      <td>Enter the E-mail</td>
      <td>
        <input type="text" id="mail" />
      </td>
      <td>
        <span id="eemail"></span>
      </td>
    </tr>
    <tr>
      <td>Enter the age</td>
      <td>
        <input type="text" id="age" />
      </td>
      <td>
        <span id="eage"></span>
      </td>
    </tr>
    <tr>
      <td>Enter the phone no</td>
      <td>
        <input type="text" id="phone" />
      </td>
      <td>
        <span id="ephone"></span>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="submit" id="submit" value="Send" />
      </td>
    </tr>
  </table>
</body>

＆＃13;

Answer 2

你可以使用 try catch block

这样做

<强> HTML

<form action="">
    <div>
        <label>Name</label>
        <input type="text" name="name"/>
        <div class="error error-name"></div>
    </div>
    <div>
        <label>Email</label>
        <input type="email" name="email"/>
        <div class="error error-email"></div>
    </div>
    <div>
        <label>Age</label>
        <input type="number" name="age"/>
        <div class="error error-age"></div>
    </div>
    <button type="submit">Submit</button>
</form>

<强> JS

(function($) {
    $( 'form' ).on( 'submit', function( event ) {
        $this = $ (this);
        $this.find ( '.error' ).html ( '' );
        try {
            if ( ! $this .find ( 'input[name="name"]' ).val ().match (/[a-zA-Z]+/) ) {
                throw {
                    errorMessages : {
                        'name' : [
                            'Name should contain only a-z & A-Z letters.'
                        ]
                    }
                };
            }

            if (!/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test( $this .find ( 'input[name="email"]' ).val () ))
            {
                throw {
                    errorMessages : {
                        'email' : [
                            'Please enter a valid email address.'
                        ]
                    }
                };
            }

            var $age = parseInt($this .find ( 'input[name="age"]' ).val () || 0);

            if ( $age > 25 || $age < 18 ) {
                throw {
                    errorMessages : {
                        'age' : [
                            'Age should be between 18 to 25.'
                        ]
                    }
                };
            }

            if ( ! $ ( 'form input[name="phone"]' ).val ().match (/[0-9]{10}/) ) {
                throw {
                    errorMessages : {
                        'phone' : [
                            'Invalid phone should be 10 digits.'
                        ]
                    }
                };
            }
        } catch ( e ) {
            event.preventDefault();
            $.each ( e.errorMessages, function ( i, v ) {
                $this .find ( '.error-'+i ).html( v.shift() );
            });
        }
    } );
} (jQuery));

<强> Also don't forget to include jQuery

jquery

2 个答案: