jQuery表单验证 案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="../css/css.css" type="text/css" rel="stylesheet"/>
        <script language="JavaScript" type="text/javascript" src="/common/js/jquery.js"></script>
        <script src="/common/js/kindeditor/kindeditor.js"></script>
	<script src="/common/js/kindeditor//lang/zh_CN.js"></script>
	<script type="text/javascript">
            $(document).ready(function() {
                var formatEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                var formatMobile = /^(0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8})$/;
                var formatTel = /^0\d{2,3}-?\d{7,8}$/;
                var formatIdentity = /^([1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X))$/;
                var formatREGISTERED_CAPITAL = /^\d+$/;

                //基本信息填写
                var fullname = $('#fullname');
                var identity = $('#identity');
                var tel = $('#tel');
                var mobile = $('#mobile');
                var email = $('#email');
                //店铺名称填写
                var shop_name = $('#shop_name');
                //公司详细信息
                var company_name = $('#company_name');
                var business_license_id = $('#business_license_id');
                var legal_person = $('#legal_person');
                var legal_person_id = $('#legal_person_id');
                var BUSINESS_LICENSE_ADDRESS = $('#BUSINESS_LICENSE_ADDRESS');
                var REGISTERED_CAPITAL = $('#REGISTERED_CAPITAL');
                var BUSINESS_SCOP = $('#BUSINESS_SCOP');

                //基本信息
                $(fullname).blur(function() {
                    if (fullname.val() !== '') {
                        $('#fullname-s').hide();
                        $('#fullname-x').hide();
                    }
                    else {
                        $('#fullname-x').show();
                        $('#fullname-s').show();
                    }
                });
                //身份证号码
                $(identity).blur(function() {
                    if (identity.val() !== '') {
                        $('#identity-s').hide();
                        if (identity.val() !== '' && !identity.val().match(formatIdentity)) {
                            $('#identity-s').html('身份证号码格式不正确!');
                            $('#identity-s').show();
                            $('#identity-x').show();
                        }else{
                            $('#identity-x').hide();
                        }
                    }
                    else {
                        $('#identity-s').html('身份证号码不能为空!');
                        $('#identity-s').show();
                        $('#identity-x').show();
                    }
                });
                //固定电话
                $(tel).blur(function() {
                    if (tel.val() !== '') {
                        $('#tel-s').hide();
                        if (tel.val() !== '' && !tel.val().match(formatTel)) {
                            $('#tel-s').html('固定电话号码格式不正确!正确格式如:0311-87654321');
                            $('#tel-s').show();
                            $('#tel-x').show();
                        }else{
                             $('#tel-x').hide();
                        }
                    }
                    else {
                        $('#tel-s').html('固定电话号码不能为空!');
                        $('#tel-s').show();
                        $('#tel-x').show();
                    }
                });
                //手机号码
                $(mobile).blur(function() {
                    if (mobile.val() !== '') {
                        $('#mobile-s').hide();
                        if (mobile.val() !== '' && !mobile.val().match(formatMobile)) {
                            $('#mobile-s').html('手机号码格式不正确!正确格式如:13012345678');
                            $('#mobile-s').show();
                            $('#mobile-x').show();
                        }else{
                            $('#mobile-x').hide();
                        }
                    }
                    else {
                        $('#mobile-s').html('手机号码不能为空!');
                        $('#mobile-s').show();
                        $('#mobile-x').show();
                    }
                });
                //邮箱
                $(email).blur(function() {
                    if (email.val() !== '') {
                        $('#email-s').hide();
                        if (email.val() !== '' && !email.val().match(formatEmail)) {
                            $('#email-s').html('邮箱格式不正确!');
                            $('#email-s').show();
                            $('#email-x').show();
                        }else{
                             $('#email-x').hide();
                        }
                    } else {
                        $('#email-s').html('邮箱不能为空!');
                        $('#email-s').show();
                        $('#email-x').show();
                    }
                });
                //基本信息填写-----------------------------------end

                //公司详细信息------------------------------------------------
                $(company_name).blur(function() {
                    if (company_name.val() !== '') {
                        $('#company_name-s').hide();
                        $('#company_name-x').hide();
                    }
                    else {
                        $('#company_name-s').show();
                        $('#company_name-x').show();
                    }
                });
                //营业执照注册号
                $(business_license_id).blur(function() {
                    if (business_license_id.val() !== '') {
                        $('#business_license_id-s').hide();
                        $('#business_license_id-x').hide();
                    }
                    else {
                        $('#business_license_id-s').show();
                        $('#business_license_id-x').show();
                    }
                });
                //法人姓名
                $(legal_person).blur(function() {
                    if (legal_person.val() !== '') {
                        $('#legal_person-s').hide();
                        $('#legal_person-x').hide();
                    }
                    else {
                        $('#legal_person-s').show();
                        $('#legal_person-x').show();
                    }
                });
                //法人身份证
                $(legal_person_id).blur(function() {
                    if (legal_person_id.val() !== '') {
                        $('#legal_person_id-s').hide();
                        if (legal_person_id.val() !== '' && !legal_person_id.val().match(formatIdentity)) {
                            $('#legal_person_id-s').html('身份证号码格式不正确!');
                            $('#legal_person_id-s').show();
                            $('#legal_person_id-x').show();
                        }else{
                            $('#legal_person_id-x').hide();
                        }
                    }
                    else {
                        $('#legal_person_id-s').html('身份证号码不能为空!');
                        $('#legal_person_id-s').show();
                        $('#legal_person_id-x').show();
                    }
                });
                //公司详细地址
                $(BUSINESS_LICENSE_ADDRESS).blur(function() {
                    if (BUSINESS_LICENSE_ADDRESS.val() !== '') {
                        $('#BUSINESS_LICENSE_ADDRESS-s').hide();
                        $('#BUSINESS_LICENSE_ADDRESS-x').hide();
                    }
                    else {
                        $('#BUSINESS_LICENSE_ADDRESS-s').show();
                        $('#BUSINESS_LICENSE_ADDRESS-x').show();
                    }
                });
                //注册资金
                $(REGISTERED_CAPITAL).blur(function() {
                    if (REGISTERED_CAPITAL.val() !== '') {
                        $('#REGISTERED_CAPITAL-s').hide();
                        if (REGISTERED_CAPITAL.val() !== '' && !REGISTERED_CAPITAL.val().match(formatREGISTERED_CAPITAL)) {
                            $('#REGISTERED_CAPITAL-s').html('只能输入数字!');
                            $('#REGISTERED_CAPITAL-s').show();
                            $('#REGISTERED_CAPITAL-x').show();
                        }else{
                            $('#REGISTERED_CAPITAL-x').hide();
                        }
                    }
                    else {
                        $('#REGISTERED_CAPITAL-s').html('注册资金不能为空!');
                        $('#REGISTERED_CAPITAL-s').show();
                        $('#REGISTERED_CAPITAL-x').show();
                    }
                });
                //经营范围
                $(BUSINESS_SCOP).blur(function() {
                    if (BUSINESS_SCOP.val() !== '') {
                        $('#BUSINESS_SCOP-s').hide();
                        $('#BUSINESS_SCOP-x').hide();
                    }
                    else {
                        $('#BUSINESS_SCOP-s').show();
                        $('#BUSINESS_SCOP-x').show();
                    }
                });
                //公司详细信息----------------------------------------end

                //店铺信息填写----------------------------------------------
                $(shop_name).blur(function() {
                    if (shop_name.val() !== '') {
                        $('#shop_name-s').hide();
                        $('#shop_name-x').hide();
                    }
                    else {
                        $('#shop_name-s').show();
                        $('#shop_name-x').show();
                    }
                });
                //店铺信息填写----------------------------------end
                
                $('#nextStepBtn').click(function() {
                    if (fullname.val() === '' || identity.val() === '' || tel.val() === '' || mobile.val() === ''
                            || email.val() === '' || shop_name.val() === '' || company_name.val() === '' || business_license_id.val() === ''
                            || legal_person.val() === '' || legal_person_id.val() === '' || BUSINESS_LICENSE_ADDRESS.val() === ''
                            || REGISTERED_CAPITAL.val() === '' || BUSINESS_SCOP.val() === '') {
                        alert('填写信息不完整');
                        return false;
                    }
                    if (identity.val() !== '') {
                        if (!identity.val().match(formatIdentity)) {
                            alert('身份证格式不正确!');
                            return false;
                        }
                    }
                    if (tel.val() !== '') {
                        if (!tel.val().match(formatTel)) {
                            alert('固定电话格式不正确!');
                            return false;
                        }
                    }
                    if (mobile.val() !== '') {
                        if (!mobile.val().match(formatMobile)) {
                            alert('手机号码格式不正确!');
                            return false;
                        }
                    }
                    if (email.val() !== '') {
                        if (!email.val().match(formatEmail)) {
                            alert('邮箱格式不正确!');
                            return false;
                        }
                    }
                    if (legal_person_id.val() !== '') {
                        if (!legal_person_id.val().match(formatIdentity)) {
                            alert('企业法人身份证格式不正确!');
                            return false;
                        }
                    }
                    if (REGISTERED_CAPITAL.val() !== '') {
                        if (!REGISTERED_CAPITAL.val().match(formatREGISTERED_CAPITAL)) {
                            alert('注册资金只能是纯数字!');
                            return false;
                        }
                    }
                    
                });
            });
//需要判断某些项是否存在,demo,没有用
            function MembernameExist() {
                jQuery.ajax({
                    type: "GET",
                    url: "/shop/checkexist.aspx",
                    dataType: "html",
                    data: "flag=m&userName=" + escape($("#membername").val()),
                    beforeSend: function(XMLHttpRequest) {
                        $("#smembername").text("正在查询……");
                    },
                    success: function(msg) {
                        $("#smembername").html(msg);
                        var chan = $("#smembername").html();
                        chan = chan.substring(0, 6);
                        if (chan == "用户名已存在")
                            $("#membername").clearInputs();
                    },
                    complete: function(XMLHttpRequest, textStatus) {
                        //finisi return
                    },
                    error: function(XMLHttpRequest, textStatus, errorthrow) {
                        //error treat
                    }
                });
            }

            KindEditor.ready(function(K) {
				var editor = K.editor({
					allowFileManager : true
		        });
				K('#pickButton4').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							showRemote : false,
							imageUrl : K('#url3').val(),
							clickFn : function(url, title, width, height, border, align) {								
								K('#url3').val(url);
								editor.hideDialog();
							}
						});
					});
				});
				K('#pickButton1').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							showRemote : false,
							imageUrl : K('#url3').val(),
							clickFn : function(url, title, width, height, border, align) {								
								K('#url1').val(url);
								editor.hideDialog();
							}
						});
					});
				});

				$("#shop_name").blur(function(){
		              var str1=$.trim($("#shop_name").val());
		              if(str1){
			              //str1=encodeURI(str1);
			              $.post('checkshopname.php',{shopname:str1},function(data){
	                            if(data==0){
                                    alert("您输入的店铺名称已被注册,请重新输入!");
                                    $("#shop_name").val('');
                                    $("#shop_name").focus();
		                        }
				          })
		              }
		        })
				
            });
        
        </script>
    </head>
    <body>
        <?php require_once 'Inc_headForJoin.php'; ?>
        <div id="nmain">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="lh-50">公司信息提交</h3>
                    <div class="more">
                        <div class="progress">
                            <div class="progress-wrap">
                                <div class="progress-item passed">
                                    <div class="number">1</div>
                                    <div class="progress-desc">入驻须知</div>
                                </div>
                            </div>
                            <div class="progress-wrap">
                                <div class="progress-item ongoing">
                                    <div class="number">2</div>
                                    <div class="progress-desc">信息提交</div>
                                </div>
                            </div>
                            <div class="progress-wrap">
                                <div class="progress-item tobe">
                                    <div class="number"><i class="tick"></i></div>
                                    <div class="progress-desc">等待审核</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <form name="stepForm" id="stepForm" method="post" enctype="multipart/form-data" action="">
                    <div class="panel-body">
                        <div class="callout mb10">
                            <i></i>
                            <div class="content">
                                以下所需要上传电子版资质仅支持JPG、GIF、PNG格式的图片,大小不超过2M,且必须加盖企业彩色公章。
                            </div>
                        </div>
                        <!-- 基本信息填写 -->
                        <div class="m" >
                            <div class="mt">
                                <h4 class="title">基本信息填写</h4>
                            </div>
                            <div class="mc">
                                <dl class="horizontal fl">
                                    <dt><span class="red" id="fullname-x">*</span>申请人姓名</dt>
                                    <dd>
                                        <input type="text" class="input" name="fullname" id="fullname" value=""/>
                                        <label class="error" id="fullname-s" style="display:none" >申请人姓名不能为空!</label>
                                    </dd>
                                    <dt><span class="red" id="identity-x">*</span>身份证号</dt>
                                    <dd>
                                        <input type="text" class="input" name="identity" id="identity" value=""/>
                                        <label class="error" id="identity-s" style="display:none">身份证号格式错误!</label>
                                    </dd>
                                    <dt><span class="red" id="tel-x">*</span>固定电话</dt>
                                    <dd>
                                        <input type="text" class="input" name="phone" id="tel" value=""/>
                                        <label class="error" id="tel-s" style="display:none">请正确填写您的公司电话,如:010-87654321</label>
                                    </dd>
                                    <dt><span class="red" id="mobile-x">*</span>手机</dt>
                                    <dd class="deletePane">
                                        <input type="text" class="input" name="mobile" id="mobile" value="" />
                                        <label class="error" id="mobile-s" style="display:none">手机格式不正确,如:13812345678</label>
                                    </dd>
                                    <dt><span class="red" id="email-x">*</span>电子邮箱</dt>
                                    <dd class="deletePane">
                                        <input type="text" class="input" name="email" id="email" value="" />
                                        <label class="error" id="email-s" style="display:none">请正确填写你的电子邮箱,如:adc@123.com</label>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <!-- 公司信息填写 -->
                        <div class="m" >
                            <div class="mt">
                                <h4 class="title">公司信息填写</h4>
                            </div>
                            <div class="mc">
                                <dl class="horizontal fl">
                                    <dt><span class="red" id="company_name-x">*</span>公司名称</dt>
                                    <dd>
                                        <input type="text" class="input" name="company_name" id="company_name" value=""/>
                                        <label class="error" id="company_name-s" style="display:none">公司名称不能为空</label>
                                    </dd>
                                    <dt><span class="red" id="business_license_id-x">*</span>营业执照注册号</dt>
                                    <dd>
                                        <input type="text" class="input" name="corp_license_id" id="business_license_id" value=""/>
                                        <label class="error" id="business_license_id-s" style="display:none" >营业执照注册号不能为空</label>
                                    </dd>
                                    <dt><span class="red" id="legal_person-x">*</span>法定代表人姓名</dt>
                                    <dd><input type="text" class="input" name="legal_person"  id="legal_person" value=""/>
                                        <label class="error" id="legal_person-s" style="display:none" >法定代表人姓名不能为空</label>
                                    </dd>
                                    <dt><span class="red" id="legal_person_id-x">*</span>身份证号</dt>
                                    <dd><input type="text" class="input" name="legal_person_id" id="legal_person_id" value=""/>
                                        <label class="error" id="legal_person_id-s" style="display:none" >身份证号不能为空</label>
                                    </dd>
                                    <dt><span class="red">*</span>法人身份证电子版</dt>
                                    <dd class="deletePane">
                                        <div id="fileList4">
                                        </div>
                                        <div id="container4" >                                                                                  
                                            <input readonly=”readonly” type="text" id="url3" value="" name='legal_person_id_pic'/><a id="pickButton4" class="btn-vice">上传</a>                                                                                   
                                            <span id="fileButton4" class="error"></span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </div>
                                    </dd>
                                    <dt><span class="red">*</span>公司所在地</dt>

                                    <dd>
                                        <select name="province" id="add0" class="chechthis" οnchange="Setdiqu($(this), 'add1')" rel="shengshi" style=" width:95px; height:22px;">
                                            <option value="">请选择省份</option>
                                            <? foreach($shengfen_class as $item){?>
                                            <option value="<?= $item['code'] ?>" <? if($item['code']==$add0){?>selected<? }?>>
                                            <?= $item['name'] ?>
                                        </option>
                                        <? }?>
                                    </select>
                                    城市:
                                    <select name="city" id="add1" class="chechthis" rel="shengshi" οnchange='Setdiqu($(this), 2)' style=" width:109px; height:22px;">
                                        <option value="">请选择</option>
                                        <? foreach($shiqu_class as $item){?>
                                        <option value="<?= $item['code'] ?>" <? if($item['code']==$add1){?>selected<? }?>>
                                        <?= $item['name'] ?>
                                    </option>
                                    <? }?>
                                </select>
                                <!--<input type="hidden" value="" name="categoryMemoryIdsBackUp" id="categoryMemoryIdsBackUp"/>
                                <label id="catLevB2Msg" class="error" for="catLevB_2" generated="true"></label>
                                <label id="catLevB1Msg" class="error" for="catLevB_1" generated="true"></label>-->
                            </dd>
                            <dt><span class="red" id="BUSINESS_LICENSE_ADDRESS-x">*</span>公司详细地址</dt>
                            <dd><input type="text" class="input" name="address" id="BUSINESS_LICENSE_ADDRESS" value=""/>
                                <label class="error" id="BUSINESS_LICENSE_ADDRESS-s" style="display:none" >公司详细地址不能为空</label>
                            </dd>
                            
                            <dt><span class="red">*</span>成立日期</dt>
                            <dd>
                                <input id="establishDate" type="text" class="input jdate narrow" onClick="WdatePicker()" name="birth_date" value=""/>
                                <span class="error" id="establishDateSpan" >  </span>
                            </dd>
                            <dt><span class="red">*</span>营业期限</dt>
                            <dd>
                                <input id="startDate" type="text" class="input jdate narrow" onClick="WdatePicker()" name="startdate"  value=""/>
                                —
                                <input id="endDate" type="text" class="input jdate narrow" onClick="WdatePicker()" name="enddate" value=""/>
                                <span class="error" id="dateSpan" >  </span>
                            </dd>
                            <dt><span class="red" id="REGISTERED_CAPITAL-x">*</span>注册资本</dt>
                            <dd><input type="text" class="input" name="reg_fee" id="REGISTERED_CAPITAL" value=""/>万元
                                <label class="error" id="REGISTERED_CAPITAL-s" style="display:none" >注册资本不能为空</label>
                            </dd>
                            <dt><span class="red" id="BUSINESS_SCOP-x">*</span>经营范围</dt>
                            <dd>
                                <textarea name="operate_col" id="BUSINESS_SCOP" style="font-size: 12px; width:300px; height: 70px;margin-top: 10px;"></textarea>
                                <label class="error" id="BUSINESS_SCOP-s" style="display:none">经营范围不能为空</label>
                            </dd>
                            <dt><span class="red">*</span>营业执照副本电子版</dt>
                            <dd class="deletePane">
                                <div id="fileList1">
                                </div>
                                <div id="container1" >
                                    <input readonly=”readonly” type="text" id="url1" name='lisence_pic' value="" /><a id="pickButton1" href="javascript:void(0);" class="btn-vice" >上传</a>
                                    <span id="fileButton1" class="error"></span>
                                </div>
                            </dd>
                        </dl>
                                
                        <div class="view-sample">
                            <div class="img-wrap">
                                <img src="../images/shop/shopapply/x_1.jpg" alt="" width="180" height="180" />
                            </div>
                            <div class="t-c mt10">
                                <a href="../images/shop/shopapply/1.jpg" target="_blank" class="link-blue">查看大图</a>
                            </div>
                        </div>
                    </div>
                </div>
               <!-- 店铺信息填写 -->
                <div class="m" >
                    <div class="mt">
                        <h4 class="title">店铺信息填写</h4>
                    </div>
                    <div class="mc">
                        <dl class="horizontal fl">
                            <dt><span class="red" id="shop_name-x">*</span>店铺名称</dt>
                            <dd>
                                <input type="text" class="input" name="shopname" id="shop_name" value=""/>
                                <label class="error" id="shop_name-s" style="display:none">店铺名称不能为空</label>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="btn-group t-r">
                <input type='submit' class="btn" id="nextStepBtn" value='确认提交,等待审核'>
            </div>
        </form>
    </div>

    <div class="clear"></div>
</div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值