JQ form validation

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<form method="post" action="">
	<div class="int">
		<label for="username">用户名:</label>
		<!-- add required --> for each required element
		<input type="text" id="username" class="required" />
	</div>
	<div class="int">
		<label for="email">邮箱:</label>
		<input type="text" id="email" class="required" />
	</div>
	<div class="int">
		<label for="personinfo">Profile:</label>
		<input type="text" id="personinfo" />
	</div>
	<div class="sub">
		<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
	</div>
</form>
<script type="text/javascript">
//<![CDATA[
$(function(){
	/*
	*The idea is probably to add a required tag for each required first, and use the each() method to achieve it.
	*In each() method first create an element. The created element is then added to the parent element through the append() method.
	*The this inside is very essential, each time this corresponds to the corresponding input element, and then gets the corresponding parent element.
	* Then add a lost focus event for the input element. Then verify the username and email.
	*A judgment is() is used here. If it is a user name, do the corresponding processing, and if it is an email, do the corresponding verification.
	*In the jQuery framework, you can also write authentic javascript code appropriately interspersed. For example, there are this.value and this.value.length in the authentication user name. Judge the content.
	*Then the verification of the email is carried out, which seems to use a regular expression.
	*Then add the keyup event and focus event for the input element. It is also necessary to verify the keyup and call the blur event. Use triggerHandler() to trigger the corresponding event.
	* Do unified validation when the form is finally submitted
	*Do a good job of handling the whole and details
	*/
    //If it is required, add a red star.
	$("form :input.required").each(function(){
		var $required = $("<strong class='high'> *</strong>"); //create element
		$(this).parent().append($required); //then append it to the document
	});

	//After the textbox loses focus
	$('form :input').blur(function(){
		var $parent = $(this).parent();
		$parent.find(".formtips").remove();
		// Verify username
		if( $(this).is('#username') ){
			if( this.value=="" || this.value.length < 6 ){
				var errorMsg = 'Please enter a username of at least 6 digits.';
				$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
			}else{
				var okMsg = 'The input is correct.';
				$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
			}
		}
		// verify email
		if( $(this).is('#email') ){
			if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
				var errorMsg = 'Please enter the correct E-Mail address.';
				$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
			}else{
				var okMsg = 'The input is correct.';
				$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
			}
		}
	}).keyup(function(){
		$(this).triggerHandler("blur");
	}).focus(function(){
		$(this).triggerHandler("blur");
	});//end blur

	//Submit, final verification.
	$('#send').click(function(){
		$("form :input.required").trigger('blur');
		var numError = $('form .onError').length;
		if(numError){
			return false;
		}
		alert("The registration is successful, the password has been sent to your email, please check.");
	});

	// reset
	$('#res').click(function(){
		$(".formtips").remove();
	});
})
//]]>
</script>
</body>
</html>
Effect picture:
Guess you like
