jquery提交表单验证示例代码

30 篇文章 0 订阅

用jquery.from.js加aswitch判断写表单验证:

				// 表单
					$("#btnSubmit_n4").click(function() {
						let user_name=$("#validate_n4").find("#user_name").val();
						let user_phone=$("#validate_n4").find("#user_phone").val();
						switch (true){
						    case user_name=="":alert("请输入姓名"); $("#user_name").focus(); break;
							case !/^((13[0-9]|15[0-9]|17[0-9]|18[0-9])+\d{8})$/.test(user_phone):alert("请输入正确手机号码"); $("#user_phone").focus(); break;
						default:$("#validate_n4").ajaxSubmit(function() {
							alert('提交成功!');
							$(".c-form")[0].reset();
							});
						}
					});

用layer写的表单验证:

		var x = /^[\u4e00-\u9fa5a-z]+$/;
		var t = /^((13|14|15|16|17|18|19)+\d{9})$/;
		function Submit() {
			if (!x.test($("#brand").val())) {
				layer.msg('请输入品牌!', { icon: 7 });
				return false;
			}
			if (!$("#model").val()) {
				layer.msg('请输入车型', {icon: 7});
				return false;
			}
			if (!$("#year").val()) {
				layer.msg('请输入年月', {icon: 7});
				return false;
			}
			if (!$("#city").val()) {
				layer.msg('请输入所在城市', {icon: 7});
				return false;
			}
			if (!$("#kilometre").val()) {
				layer.msg('请输入里程', {icon: 7});
				return false;
			}
			if (!t.test($("#number").val())) {
				layer.msg('请输入正确的手机号!', {icon: 7});
				return false;
			}
			$("#validate").ajaxSubmit(function() {
				layer.msg('提交成功,我们会尽快联系您!', {
					icon: 1
				});
				$(".c-form ")[0].reset();
			});
		}

js写的干净的表单验证:

/*
	输入框检测js代码	
	用法:
	<form action = '' οnsubmit="return FormValid.valid(this);">
*/
var FormValid = {
	valid : function( obj ) {
		var elements = obj.elements;
		var length = elements.length;
		for( var i=0;i<length;i++ ) 
			if( valid = elements[ i ].getAttribute( 'valid' ) ) 
				if( !this.docheck( valid,elements[ i ] ) ) {
					alert( elements[ i ].getAttribute( 'errmsg' ) );
					return false;
				}
		return true;
	},
	Reg : {
		isQQ : /^[1-9]\d{4,11}$/,
		isNumber : /^[1-9]\d{1,}/,
		isZip : /^[1-9]\d{5}$/,
		isMobile : /^(13|15|18)\d{10}$/,
		isPhone : /^0\d{2,3}-\d{7,8}$/,
		isInt : /^[-\+]?\d+$/,
		isEmail : /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)/
	},
	docheck : function( valid,node_obj ) {
		switch( valid ) {
			case 'isQQ':
			case 'isNumber':
			case 'isZip':
			case 'isMobile':
			case 'isPhone':
			case 'isInt':
			case 'isEmail':
				var result = this.doReg( valid,node_obj );
				break;
			default:
				var result = eval( 'this.' + valid + '( node_obj );' );
				break;
		}
		if( !result )
			node_obj.focus();
		return result;
	},
	doReg : function( valid,node_obj ) {
		var regexp = this.Reg[ valid ] ;
		var result = regexp.test( node_obj.value );
		if( !result )
			node_obj.focus();
		return result;
	},
	required : function( node_obj ) {
		return node_obj.value != '';
	},
	range : function( node_obj ) {
		return node_obj.value>=node_obj.getAttribute( 'min' ) & node_obj.value<=node_obj.getAttribute( 'max' );
	},
	eq : function( node_obj ) {
		return node_obj.value == node_obj.getAttribute( 'eqValue' );
	},
	gt : function( node_obj ) {
		return node_obj.value >=node_obj.getAttribute( 'gtValue' );
	}
}

验证邮箱和手机号码

var user_phone=$("#validate").find("#user_phone").val();
var user_email=$("#validate").find("#user_email").val();
var user_phones=/^((13[0-9]|15[0-9]|17[0-9]|18[0-9])+\d{8})$/.test(user_phone)||/^[0-9]{3,4}[-][0-9]{8}$/.test(user_phone);
var user_emails=user_email.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/);
//然后判断是否为空
if(user_phones&&user_emails){alert('格式成功!');}else if{alert('格式成功!'); return false;}

验证姓名只能是英文和汉字(/^[\u0391-\uFFE5A-Za-z]+$/)

var username=$("#ajaxForm").find("#username").val();
var usernames=/^[\u0391-\uFFE5A-Za-z]+$/.test(username);

验证输入的位数(/^\d{4}$/)

var verifyCode = $("#myfrom").find("#verifyCode").val();
var verifyCodes = /^\d{4}$/.test(verifyCode);

提交之后清空表单

$("#myfrom2")[0].reset();

提交验证(一):

<a href="javascript:confirm_delete('index.php?m=Guestbook&amp;a=delete&amp;id=647');">删除</a>
function confirm_delete(url){
	if(confirm('您确定要执行删除操作?')){
		window.location.href=url;
		}else{
			return false;
			}
	}

提交验证(二):

if(confirm('是否确定提交?')) {return checkForm();}else{return false;}
	function checkForm(){
		$("#calcFrom").find("input").each(function(){
			if(this.value == '') {
			text = $(this).parent().prev().text();
			alert(text+"是必填项");
			this.focus();
			return false;//跳出each
			}
		});
	}
});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值