各种校验--jQuery+js+正则表达式

最新推荐文章于 2024-10-01 20:12:28 发布

weixin_33995481

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量84

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/AnymoreCoder/blog/741453

版权

2019独角兽企业重金招聘Python工程师标准>>>

校验效果：正确与错误的提示、失去焦点验证、提交时提示以及重置按钮。

如图（图略丑）：

html:

<form class="form-horizontal" role="form" id="uid_builder_form">
						<div class="form-group">
							 <label for="country_code" class="col-sm-3 control-label">国家代码</label>
								<input class=" form-control required" id="country_code" name="country_code" type="text" value="460" style="width:40%;display:inline" />
						</div>
						<div class="form-group">
							 <label for="issuer_identify" class="col-sm-3 control-label">发行标识</label>
								<input class="form-control required" id="issuer_identify"  name="issuer_identify" type="text"  style="width:40%;display:inline"/>
								<span class="issuer_identify_tips" style="color:red">*</span>
						</div>
						
				       <div class="form-group">
							 <label for="platform_os_version" class="col-sm-3 control-label">Platform & OS 版本</label>
								<input class="form-control required" id="platform_os_version" name="platform_os_version" type="text" style="width:40%;display:inline"/>
						        <span class="platform_os_version_tips" style="color:red">*</span>
						</div>
						 <div class="form-group">
							 <label for="additional_issuer_info" class="col-sm-3 control-label">附加发行信息</label>
								<input class="form-control required" id="additional_issuer_info" name="additional_issuer_info" type="text" value="00000" style="width:40%;display:inline"/>
						</div>
						 <div class="form-group">
							 <label for="uid_num" class="col-sm-3 control-label">生成UID数量</label>
								<input class="form-control required" id="uid_num" name="uid_num" type="text" value="1" style="width:40%;display:inline"/>
						</div>
						
						<div class="form-group">
							<div class="col-sm-offset-5 col-sm-7">
								 <a class="btn btn-primary" id="build_it">Build it</a>
								 <a class="btn btn-primary" id="reset_btn_demo">Reset</a>
							</div>
						</div>
				     </div>	
</form>

js:

$(document).ready(function(){
    //设置默认值
	$("form :input.required").each(function(){
        var $required = $("<strong class='high' style='color:red'></strong>"); //创建元素
        $(this).parent().append($required); //然后将它追加到文档中
    });
     //文本框失去焦点后
    $('form :input').blur(function(){
         var $parent = $(this).parent();
         $parent.find(".formtips").remove();
         //验证country_code
         if( $(this).is('#country_code') ){
                if( this.value=="" || this.value.length < 3 || this.value.length > 3){
                    var errorMsg = '*国家代码固定3位,请输入3位数字.';
                    $parent.append('<span class="formtips onError" style="color:red">'+errorMsg+'</span>');
                }else if(/^[0-9]*$/.test(this.value)==false){
					var errorMsg = '*请输入数字.';
                    $parent.append('<span class="formtips onError" style="color:red">'+errorMsg+'</span>');
				}else{
                    var okMsg = '输入正确.';
                    $parent.append('<span class="formtips onSuccess" style="color:green">'+okMsg+'</span>');
                }
         }
		 //验证issuer_identify
         if( $(this).is('#issuer_identify') ){
                if( this.value=="" || this.value.length < 3 || this.value.length > 3){
					$(".issuer_identify_tips").hide();
                    var errorMsg = '*发行标识固定3位,请输入3位数字.';
                    $parent.append('<span class="formtips onError" style="color:red">'+errorMsg+'</span>');
                }else if(/^[0-9]*$/.test(this.value)==false){
					$(".issuer_identify_tips").hide();
					var errorMsg = '*请输入数字.';
                    $parent.append('<span class="formtips onError" style="color:red">'+errorMsg+'</span>');
				}else{
					$(".issuer_identify_tips").hide();
                    var okMsg = '输入正确.';
                    $parent.append('<span class="formtips onSuccess" style="color:green">'+okMsg+'</span>');
                }
         }
		 
		 
		 
         //验证platform_os_version
         if( $(this).is('#platform_os_version') ){
                if( this.value=="" || this.value.length < 5 || this.value.length > 5){
					$(".platform_os_version_tips").hide();
                    var errorMsg = '*platform & OS 版本固定5位,请输入5位数字.';
                    $parent.append('<span class="formtips onError" style="color:red">'+errorMsg+'</span>');
                }else if(/^[0-9]*$/.test(this.value)==false){
					$(".platform_os_version_tips").hide();
					var errorMsg = '*请输入数字.';
                    $parent.append('<span class="formtips onError" style="color:red">'+errorMsg+'</span>');
				}else{
					$(".platform_os_version_tips").hide();
                    var okMsg = '输入正确.';
                    $parent.append('<span class="formtips onSuccess" style="color:green">'+okMsg+'</span>');
                }
         }
		 
	    //验证additional_issuer_info
         if( $(this).is('#additional_issuer_info') ){
                if( this.value=="" || this.value.length < 5 || this.value.length > 5){
                    var errorMsg = '*附加发行信息固定5位,请输入5位数字.';
                    $parent.append('<span class="formtips onError" style="color:red">'+errorMsg+'</span>');
                }else if(/^[0-9]*$/.test(this.value)==false){
					var errorMsg = '*请输入数字.';
                    $parent.append('<span class="formtips onError" style="color:red">'+errorMsg+'</span>');
				}else{
                    var okMsg = '输入正确.';
                    $parent.append('<span class="formtips onSuccess" style="color:green">'+okMsg+'</span>');
                }
         }
	 //验证additional_issuer_info
         if( $(this).is('#uid_num') ){
                if( this.value=="" || this.value.length < 1){
                    var errorMsg = '*最少输入1个数字';
                    $parent.append('<span class="formtips onError" style="color:red">'+errorMsg+'</span>');
                }else if(/^[0-9]*$/.test(this.value)==false){
					var errorMsg = '*请输入数字.';
                    $parent.append('<span class="formtips onError" style="color:red">'+errorMsg+'</span>');
				}else{
                    var okMsg = '输入合法.';
                    $parent.append('<span class="formtips onSuccess" style="color:green">'+okMsg+'</span>');
                }
         }
    });
    
  //提交，生成。
    $('#build_it').click(function(){
           $("form :input.required").trigger('blur');
           var numError = $('form .onError').length;
           if(numError){
		   	   //$.messager.alert("操作提示","请把信息填写完整","info");//要引入jquery-easyui才可以用
			   alert("请把信息填写完整");s
               return false;
           } else {
               //TODO
			}//if-else结束
    });
		 
   //重置
    $('#reset_btn_demo').click(function(){
           $(".formtips").remove();
    });
});

转载于:https://my.oschina.net/AnymoreCoder/blog/741453