利用jQuery实现企业开户表单验证代码



12 47 16



特效描述:利用jQuery实现 企业开户 表单验证代码,利用jQuery实现企业开户表单验证代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/home.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/up.js"></script>

3. HTML代码

<section class="aui-content">
	<div style="height:20px;"></div>
	<div class="aui-content-up">
		<form action="" name="form1" method="post">
			<div class="aui-content-up-form">
				<h2>开户资质</h2>
			</div>
			<div class="aui-form-group clear">
				<label class="aui-label-control">
					姓名 <em>*</em>
				</label>
				<div class="aui-form-input">
					<input type="text" class="aui-form-control-two" name="yourname" onBlur="checkna()" required id="1" placeholder="请输入身份证名字">
					<span class="tips" id="divname">长度1~6个字符</span>
				</div>
			</div>
			<div class="aui-form-group clear">
				<label class="aui-label-control">
					手机号码 <em>*</em>
				</label>
				<div class="aui-form-input">
					<input type="text" class="aui-form-control-two" name="youphone" id="2" placeholder="请输入11位的手机号码" onBlur="checkpsd1()" required/>
					<span class="tips" id="phone">必须是11位的数字</span>
				</div>
			</div>
			<div class="aui-form-group clear">
				<label class="aui-label-control">
					资质图片 <em>*</em>
				</label>
				<div class="aui-form-input">
					<input type="text" class="aui-form-control-two" name="youziz" id="3" placeholder="请输入营业执照编码/统一社会信用代码" onBlur="checkpsd2()" required/>
					<span class="tips" id="zizhi">必须是18位社会信用代码</span>
				</div>
			</div>
			<div class="aui-form-group clear">
				<label class="aui-label-control">
					推广内容
				</label>
				<div class="aui-form-input">
					<textarea class="aui-form-control" name="description" id="4" minlength="5">请输入您要推广的内容...</textarea>
				</div>
			</div>
			<div class="aui-form-group clear">
				<label class="aui-label-control">
					营业执照 <em>*</em>
					<span>小于5M</span>
				</label>
				<div class="aui-form-input">
					<div class="aui-content-img-box aui-content-full">
						<div class="aui-photo aui-up-img clear">
							<section class="aui-file-up fl">
								<img src="img/up.png" class="add-img">
								<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
							</section>
						</div>
					</div>
				</div>
			</div>
			<div class="aui-form-group-text">
				<h3>需要以下材料</h3>
				<p>营业执照或组织机构代码等生产方《化妆品生产许可证》代生产合同或经销证明国产非特殊用途化妆品食药监查询截图进口化妆品,需提供国务院食药监行政部门备案登记即《进口(非)特殊用途化妆品备案凭证》</p>
			</div>
		</form>
	</div>
	<div class="aui-btn-default">
		<button class="aui-btn aui-btn-account">保存并提交审核</button>
	</div>
</section>
<!-- mask begin -->
<div class="aui-mask aui-works-mask">
	<div class="aui-mask-content">
		<p class="aui-delete-text">确定要删除你上传的资料?</p>
		<p class="aui-check-text">
			<span class="aui-delete aui-accept-ok">确定</span>
			<span class="aui-accept-no">取消</span>
		</p>
	</div>
</div>
<!-- mask end -->
<script type="text/javascript">
	//验证姓名
	function checkna(){
		na=form1.yourname.value;
		if( na.length <1 || na.length >6)
		{
			divname.innerHTML='<font class="tips_false">长度是1~6个字符</font>';
		}else{
			divname.innerHTML='<font class="tips_true">输入正确</font>';
		}
	}
	//验证手机号码
	function checkpsd1(){
		na=form1.youphone.value;
		if( na.length <11 || na.length >11)
		{
			phone.innerHTML='<font class="tips_false">必须是11位的数字</font>';
		}else{
			phone.innerHTML='<font class="tips_true">输入正确</font>';
		}
	}
	//验证社会统一代码
	function checkpsd2(){
		na=form1.youziz.value;
		if( na.length <18 || na.length >18)
		{
			zizhi.innerHTML='<font class="tips_false">必须是18位社会信用代码</font>';
		}else{
			zizhi.innerHTML='<font class="tips_true">输入正确</font>';
		}
	}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 头像上传 图片上传 文本框 text文本框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到