表单验证js代码

请转载此文的朋友务必附带原文链接,谢谢。

原文链接:http://xuyran.blog.51cto.com/11641754/1861926

<form class="mui-input-group">
	    <div class="mui-input-row">
	        <input type="tel"  placeholder="手机" required="required">     
	    </div>
	    <div>请输入正确的手机号码</div>
	    <div class="mui-input-row ss">
	        <input type="text"  placeholder="验证码" id="yzm" required="required">
	        <button type="button" class="btn" id="getCode">发送</button>
	    </div>
	    <div>验证码必须为6位数字</div>
	    <div class="mui-input-row" >
	        <input type="password"  placeholder="限制6-20位字符,区分大小写" name="password" required="required">
	    </div>
	    <div>密码不得小于6或大于20个字符</div>
	    <div class="mui-input-row" >
	        <input type="password"  placeholder="确认密码" name="password-sure" required="required">
	    </div>
	    <div>两次密码输入不一致</div>
	    <div class="mui-input-row" id="submit">
	         <button type="button" class="btn">提交</button>
	    </div>
	</form>

jquery代码如下:

$(function(){
	//手机号检查
	$("input[type=‘tel‘]").keyup(function(){
		var reg = /^\d*$/;
		if(this.value.length > 11){
        	this.value = this.value.substr(0,11);
        	$(this).focus();
        }
		else if(!reg.test(this.value)){
		    $(this).parent().next().show().html("手机号码只能为数字");
		    $(this).focus();
		}else{
			$(this).parent().next().hide();
		}
	}).blur(function(){
		if(this.value == ""){
			$(this).parent().next().show().html("手机号码不能为空");
			$(this).focus();
		}
		else if(!/^1[3|4|5|8]\d{9}$/.test(this.value)){
			$(this).parent().next().show().html("请输入正确的手机号码");
			$(this).focus();
		}else{
			$(this).parent().next().hide();

		}
	})
	//获取短信验证码
	$("#getCode").click(function(){
		$("input[type=‘tel‘]").trigger(‘blur‘);
		var time = 120;
		var error = $(this).parent().prev().css("display");
		alert(error);
		alert(error != "block");
		var phoneNum = $("input[type=‘tel‘]").val();
		if(phoneNum != ""&& error != "block"){
			$.ajax({
				type:"post",
				url:"/Ajax/VerificationCode.ashx",
				dataType:"json",
				data:{
					method:"SendCode",
					Phone:phoneNum 
				},
				success:function(data){
				if(data.reslut.msg == 1){
				var t = setInterval(function(){
					time--;
					$(this).attr("disabled",true).addClass("grey")
					.html(time+"s<p style=‘font-size:10px‘>已发送</p>")
					if(time == 0){
						clearInterval(t);
						$("#getCode").removeAttr("disabled").removeClass("grey").html("重新获取验证码");
					}
				},1000);
				}else{
					alert(data.result.msbox);
				}
				}
			});
		}

	})
	//验证码检查
	$("#yzm").keyup(function(){
		var reg = /^\d*$/;
        if(this.value.length > 6){
        	this.value = this.value.substr(0,6);    
        }
        else if(!reg.test(this.value)){
        	$(this).parent().next().show();
        	$(this).focus();
        }else{
			$(this).parent().next().hide();
		}
	}).blur(function(){
		if(this.value == ""){
			$(this).parent().next().show().html("验证码不能为空");
		}else if(this.value.length < 6){
			$(this).parent().next().show().html("验证码必须为6位数字");
		}
	})
	//密码检查
	$("input[name = ‘password‘]").blur(function(){

	if(this.value.length < 6||this.value.length > 20){
		$(this).parent().next().show();
	}else{
		$(this).parent().next().hide();
	}
	})
	//确认密码
	$("input[name= ‘password-sure‘]").keyup(function(){
		var password = $("input[name = ‘password‘]").val();
		if(this.value != password){
		$(this).parent().next().show();
		}else{
			$(this).parent().next().hide();
		}
	}).blur(function(){
		if(this.value == "") {
			$(this).parent().next().show().html("密码不能为空");
		}
	})
	//整个表单验证
	$("#submit").click(function(){
		        $(".mui-input-row input").triggerHandler(‘blur‘);
		        var numError = $(‘.mui-input-row + div‘).css("display");
		        if(numError == "block"){
		        	return false;
		        }
		        $.ajax({
		        	type:"post",
		        	url:"/Ajax/User.ashx",
		        	dataType:"json",
		        	data:{
		        		method:"Reg",
		        		Phone: $("input[type = ‘tel‘]").val(), 
		        		Pwd: $("input[name = ‘password‘]").val(), 
		        		Code: $("#yzm").val()
		        	},
		        	success:function(data){
		        		var result = data.split("|");
                        if (result[0] == "error") {
	                       alert(result[1]);
	                        //location.reload();
	                    }
	              			if (result[0] == "success") {
	              			alert(result[1]);
	                		window.location.href="registerSuccess.html";
	            		}

		        	}

		        })
               
	})

})
时间: 10-14

表单验证js代码的相关文章

简单的JS表单验证效果代码

简单的JS表单验证代码:表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://w

一些常用的表单验证的代码

一些常用的表单验证的代码 注册验证: <script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script> //验证表单 function vailForm(){ var form = jQuery("#editForm"); if(!vailNickName())return; if(!v

简单的表单验证(js、jquery)

//javascript代码 function valForm(){ var username=document.getElementById("username"); var pwd=document.getElementById("pwd"); var repwd=document.getElementById("repwd"); var email=document.getElementById("email"); va

正则表达式表单验证实例代码详解

正则表达式表单验证实例代码详解 这篇文章主要介绍了正则表达式表单验证实例详解的相关资料,大家可以参考下.正则表达式表单验证具体内容如下: 首先给大家解释一些符号相关的意义 * 匹配前面的子表达式零次或多次: ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 1. /^$/ 这个是个通用的格式. 2. 里面输入需要实现的功能. \d 匹配一个数字字符,等价于[0-9] + 匹配前面的子表达式一次或多次: ?匹配前面的子表达式零次或一次: 下面通过一段代码给大家分析表单验证正则表达式,具体代

最常用的15个前端表单验证JS正则表达式

在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. QQ号码. 微信号.车牌号.中文正则. 1 用户名正则 1 2 3 4 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true consol

js表单验证控制代码大全

http://www.cnblogs.com/SAL2928/archive/2008/10/24/1319020.html目录: 1:js 字符串长度限制.判断字符长度.js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能输入数字,判断数字.验证数字.检测数字.判断是否为数字.只能输入数字 5:只能输入英文字符和数字 6: js email验证 .js 判断email .信箱/邮箱格式验证

验证表单的js代码段

JS常用功能 转载自:http://blog.csdn.net/kalision/article/details/12516103 引用js文件: <script src="js/demo.js"></script> 按钮 <button type="button" class="button medium button-style1 align-btn-right" value="send" o

.validate表单验证js

$("#signupForm").validate({ rules: { name: { required: true },id:{ required:true 校验类型: } }, messages: { name: { required: "请输入姓名" },id{ required: 必填 校验类型: } }}) name可以填入div里的idrequired 设置必填 校验类型 取值 描述 required true|false 必填字段 email “@”

简单的js表单验证框架

/** * 通常在我们的HTML页面表单中有大量的数据验证工作, * 免不了要写很多验证表单的js代码,这是一项非常繁琐 * 枯燥的工作.很多程序员也会经常遗漏这项工作.当然 * 一些JavaEE框架中有一些比较好的验证框架提供给我们 * 使用,但是也是需要很多繁琐的配置,页面查看起来也 * 不是很方便.一般程序员使用的也不多.所以写了这一 * 段JavaScript代码提供给大家使用.算是一个简单的 * JavaScript验证框架吧.使用起来很简单,配合下面几 * 种标签使用,能实现大多数表