Easyui (data validation)

Source: Internet
Author: User

<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%> <%@ include file= "/include/taglibs.jsp" %> <link rel= "stylesheet" href= "${pagecontext.request.contextpath}/css/qiantu_alert.min.css" > &
            Lt;div class= "Qiantu-content" > <!--TODO title--<p class= "title" > Request </p>
                    <!--TODO Content--<div class= "Content-box" > <form id= "Qiantuform" > <!--TODO Monthly repayment amount-<div class= "Month-payment" > <lab
                        el><span>*</span> amount:</label> <input type= "text" name= "Month-payment" >
                    <i class= "unit" > Meta </i> <p class= "error" ></p> </div> <!--TODO Request Repayment amount-<div class= "Apply-payment" &
                        Gt <label><span>*</span> amount:</label> <input type= "text" Name= "apply-payment
                    "> <i class=" unit "> Meta </i> <p class=" error "></p> </div> <!--TODO terms-<div class= "Replace-lim It "> <label><span>*</span> term:</label> <div class= "Select-list" > <span>--Please select--</span> <ul cl ass= "LF" > <li class= "active" >1 months </li> <l
                            I&GT;2 months </li> <li>3 months </li> </ul> <!--TODO Small triangle--<p class= "Arrow" ><b></b></p&
                    Gt    </div> <p class= "error" ></p> </div> <!--TODO Date--<div class= "Month-pay-date" > <label>&lt ;span>*</span> Date:</label> <div id= "Datediv" class= "Appoint-time" onclick= "DateC Lick () "> <input type=" text "id=" Date-picker "placeholder=" Click here to select the date "Name=" Month-pay-date "ReadOnly Valu E= "${house. Bug_year} "> <b class=" Date-icon "></b> </div> & lt;! --<input type= "text" name= "month-pay-date" readonly id= "Date-picker" placeholder= "please click here to select the date" onclick= "Showdatebox
                        (event) "> <!--<p class=" Date-unit "> Day </p> TODO Date selection box <div class= "Datepicker-box" onclick= "Showdatebox (event)" > &LT;DIV&G T;<a href= "javascript:; "class=" Date-clear "onclick=" Dateclear (event) "> Emptying </a></div> &LT;/DIV&G T --<p class= "error" ></p> </div> <
                    !--Todo Horizontal dash-<p class= "Across-line" ></p> <!--TODO bank card number-- <div class= "Payback-bank" > <label><span>*</span> bank card number: & lt;/label> <input type= "text" name= "Payback-bank" > <p class= "E  Rror "></p> </div> <!--TODO Bank--<div
                        class= "Bank-of-deposit" > <label><span>*</span> Bank:</label> <input type= "text" name= "Bank-of-deposit-name" > <!--<input type= "text" n Ame= "bank-of-deposit-Branch ">--> <p class=" error "></p> </div> <!--TODO Mobile number--<div class= "Telphone-num" > &LT;LABEL&GT;&L T;span>*</span> mobile phone number:</label> <input type= "text" name= "Telphone-num" maxlength= " "> <a href=" javascript:; "class=" Get-availcode "maxlength=" 6 "onclick=" Getavailcode () ">
                    Get Verification Code </a> <p class= "error" ></p> </div> <!--TODO Phone Verification code--<div class= "Telphone-code" > &LT;LABEL&GT;&L
                        T;span>*</span> Mobile Verification Code:</label> <input type= "text" name= "Telphone-code" > <p class= "Error" ></p> </div> <!--TODO Dashed line-
                  -  <p class= "Across-line" ></p> <!--TODO Submit Request button-<a href= "JAV
            Ascript:; "class=" submitapply-btn "onclick=" submitmonthapply () "> Submit Request </a> </form>
        </div> <!--Close button-<i class= "close-btn" onclick= "closebtn ()" ></i> </div> <script src= "${pagecontext.request.contextpath}/js/qiantu_alert.min.js" ></script> </ Body> </html>
/** * Created by Administrator on 2017/2/10.
    *//*$ (document). Click (function () {$ (". Select-list>ul"). Removeclass ("active");
$ (". Select-list>b"). Removeclass ("Active")}); $ (". Select-list>span"). Click (function () {var b=arguments.callee.caller.arguments[0]| |
    Event if (b&&b.stoppropagation) {b.stoppropagation ()} else{if (window.event) {window.event.cancelbubble=true}} var
    a=$ (This). Next ("UL");
        if (!a.hasclass ("active")) {$ (". Select-list>ul"). Removeclass ("active");
        A.addclass ("active");
        $ (". Select-list>b"). Removeclass ("active"); $ (this). Next (). Next (). Find ("B"). AddClass ("Active")} else{a.removeclass ("active"); $ (this). Next ("B").
Removeclass ("Active")}); $ (document). On ("click", ". Select-list>ul>li", function () {$ (). Prev ("span"). HTML ($ (this). HTML ()
    ); $ (this). Parent (). Removeclass ("active");
    $ (this). Parent (). Next (). Find ("B"). Removeclass ("active"); $ ('. Replace-limit. Error '). HTML ('');
}); $ (document). On ("MouseOver", ". Select-list>ul>li", function () {$ (this). AddClass ("active"). Siblings (". Active" ). Removeclass ("Active")}); */* Date plug-in call */function Dateclick () {laydate ({elem: ' #date-picker ', Festival:true, M
			In:laydate.now (), Choose:function (datas) {showTime ();
			if ($ ("#date-picker"). val () = = "") {$ ("#dateDiv ~.error"). Text ("* Please select Date");
			}else{$ ("#dateDiv ~.error"). Text ("");
}
		}
	});
    /*todo Month Repayment Date SELECT */$ (window). Load (function () {var html= "";
    for (Var i=0;i<31;i++) {html+= ' <li onclick= "Datechoose (this,event)" > ' + (i+1) + ' </li> ';
} $ ('. Datepicker-box '). Prepend ($ (' <ul> '). Append (HTML));

});

$ (document). Click (function () {$ ('. Datepicker-box '). Hide ();}); /*todo Click Please select the date to display the date selection box */function Showdatebox (e) {var e=arguments.callee.caller.arguments[0]| |
    Event
    if (e && e.stoppropagation) {e.stoppropagation (); } else if (window.event) {window.event.cancelBubble = true;
} $ ('. Datepicker-box '). Show ();
    /*todo Date Selected */function Datechoose (dom,e) {$ (DOM). addclass ("active"). Siblings (". Active"). Removeclass ("active");
    $ (' #date-picker '). Val ($ (DOM). HTML ()); var e=arguments.callee.caller.arguments[0]| |
    Event
    if (e && e.stoppropagation) {e.stoppropagation ();
    } else if (window.event) {window.event.cancelBubble = true;
    } $ ('. Datepicker-box '). Hide ();
$ ('. Month-pay-date. Error '). html (');
    }/*todo Empty */function Dateclear (e) {$ (' #date-picker '). Val ('); var e=arguments.callee.caller.arguments[0]| |
    Event
    if (e && e.stoppropagation) {e.stoppropagation ();
    } else if (window.event) {window.event.cancelBubble = true;
} $ ('. Datepicker-box '). Hide ();          
               }/*todo Form Validation *///todo loses focus validation function MonthblurVali1 (JQ,REG,HTML1,HTML2) {Jq.blur (function () {          
               var val=$ (this). Val (); if (val== ""||
                   Val==null) {$ (this). Parent (). Find ('. Error '). HTML (HTML1);
               $ (this). focus (); }else if (!reg.test (val) | | val<3000| |
                  val>30000) {$ (this). Parent (). Find ('. Error '). HTML (HTML2); /* $ (this). focus (); */}else if ($ (". Month-payment input"). val ()! = "" "&&parsefloat (val) >parsefloat ($
                   (". Month-payment input"). Val ()) {$ (this). Parent (). Find ('. Error '). HTML ("*");
               /*$ (This). focus (); */}else{$ (this). The parent (). Find ('. Error '). html (');
      }
           }); } function MonthblurVali2 (JQ,REG,HTML1,HTML2) {Jq.blur (function () {var val=$ (this). V
                Al (); if (val== "" | |
                    Val==null) {$ (this). Parent (). Find ('. Error '). HTML (HTML1);
                $ (this). focus (); }else if (!reg.test (val)) {$ (this). Parent (). Find ('. ErroR '). HTML (HTML2);
                $ (this). focus ();
                }else{$ (this). Parent (). Find ('. Error '). html (');
        }
            }); } monthblurVali2 ($ ('. Month-payment input '),/^ ([1-9]\d* (\.\d*[1-9])?) |
(0\.\d*[1-9]) $/, ' * Please enter the amount ', ' * Please enter the correct amount '); MonthblurVali1 ($ ('. Apply-payment input '),/^ ([1-9]\d* (\.\d*[1-9])?) |

(0\.\d*[1-9]) $/, ' * Please enter the amount requested ', ' * Please enter the correct application amount (3000-30000) ');
MonthblurVali2 ($ ('. Payback-bank input '),/^ (\d{14}|\d{16}|\d{19}) $/, ' * Please enter the bank card number ', ' * Please enter the correct bank card number ');
MonthblurVali2 ($ ('. Bank-of-deposit input '),/[\u4e00-\u9fa5]/, ' * Please enter the bank ', ' * Please enter the correct bank ');
MonthblurVali2 ($ ('. Telphone-num input '),/^1[34578]\d{9}$/, ' * Please enter the mobile number ', ' * Please enter the correct mobile number ');


MonthblurVali2 ($ ('. Telphone-code input '),/^\d{6}$/, ' * Please enter the phone verification code ', ' * Please enter the correct phone verification code ');
/*todo Click to get Verification code */var idx; function Getavailcode () {if ($ ('. Telphone-num input '). val () = = "") {$ ('. Telphone-num input '). Parent (). Find ('. Erro
        R '). HTML (' * Please enter mobile number ');
        $ ('. Telphone-num input '). focus ();
    Return } LayUi.use (' Layer ', function () {var layer = Layui.layer; IDX = Layer.open ({type:1, id: "Img-code", Title: ' Please enter the captcha ', Shift: 5, Content: ' <input type= ' "text" name= "title" Required placeholder= "Please enter verification code" autocomplete= "Off" class= "layui-  Input "id=" INPUT4 "><p> Verification Code incorrect &LT;/P&GT;&LT;IMG class=" layui-img "id=" imgobj "onclick=" ChangeCode (); " Src= "" > See <a id= "Imgobja" onclick= "ChangeCode ();" > Change a </a><div class= "Btns" ><button class= "layui-btn layui-btn-normal" onclick= "Alertyes ()" > Confirmation </button><button class= "layui-btn layui-btn-primary" onclick= "Cancel ()" > Cancel </button></div>
        '           
        });
    ChangeCode ();
}); }/* Click the popup to confirm the button callback */function Alertyes () {if ($ ("#input4"). val () = = = "") {$ ("#input4"). Next ("P"). HTML ("* Please enter the correct verification Code")
        ). Show ();
    Return
      if ($ ("#input4"). Val ()!== "") {$.ajax ({type: "POST",      URL: "/qtonline/checkcode.html", data:{code:$ ("#input4"). Val ()}, DataType: "JSON",
                	Async:false, Success:function (response) {if (response.msg== "fail") {
                    ChangeCode ();
                $ ("#input4"). Next ("P"). HTML ("* Please enter the correct verification Code"). Show ();                   
                    } else{$ ("#input4"). Next ("P"). Hide (); Checksum success $.ajax ({type: "POST", url: "/QTONLINE/SENDSM
                        S.html ", data:{phone:$ ('. Telphone-num input '). Val (), type:1,code:$ (" #input4 "). Val ()},
                            DataType: "JSON", success:function (response) {time ();
                            ChangeCode ();
                        Layer.close (IDX);
                    }
                    }); $ (". Get-availcode"). Removeattr ("OnclIck ");

    }
            }
        });

}///Click the popup Cancel button callback */function Cancel () {layer.close (idx);}
    function ChangeCode () {var d = math.random (100);
    $ ("#imgObj"). Removeattr ("src");
$ ("#imgObj"). attr ("src", "/qtonline/code.html?d=" +d); }/** Verification Code Countdown */Function time () {if (wait = = 0) {$ ('. Get-availcode '). attr (' href ', ' javascript:; ').
        Removeclass (' Disable ');
        $ ('. Get-availcode '). attr (' onclick ', ' getavailcode () ');
        $ ('. Get-availcode '). Text ("Get Verification Code");
    wait = 60;
        } else {$ ('. Get-availcode '). Removeattr (' href '). addclass (' disable ');
        $ ('. Get-availcode '). Removeattr ("onclick");
        $ ('. Get-availcode '). Text ("Resend (" + Wait + ")");
        wait--;
            Timer = setTimeout (function () {time ();
    }, 1000);
    }}/*todo Click submit Request */function submitmonthapply () {var monthpay=$ ('. month-payment input ');
    var applypay=$ ('. apply-payment input '); var replacelimit=$ ('. RePlace-limit. Select-list span ');
    var monthpaydate=$ ('. month-pay-date input ');
    var paybackbank=$ ('. Payback-bank input ');
    var bankofdeposit=$ ('. bank-of-deposit input ');
    var telphonenum=$ ('. Telphone-num input ');
    
    var telphonecode=$ ('. Telphone-code input ');
        if (monthpay.val () = = "") {monthpay.parent (). Find ('. Error '). HTML (' * Please enter monthly amount ');
        Monthpay.focus ();
    Return
        } if (applypay.val () = = "") {applypay.parent (). Find ('. Error '). HTML (' * Please enter the application amount ');
    /*applypay.focus (); */return; } if (Parsefloat (Applypay.val ()) >parsefloat (Monthpay.val ())) {applypay.parent (). Find ('. Error '). HTML (' * Application amount must not be greater than
        Monthly amount ');
        Applypay.focus ();
    Return
        } if (replacelimit.html () = = "--select--") {Replacelimit.parent (). Parent (). Find ('. Error '). HTML (' * Please select term ');
    Return
        } if (monthpaydate.val () = = "") {monthpaydate.parent (). Next ('. Error '). HTML (' * Please select Date ');
    Return } if (paybackbank.val () = = ""{paybackbank.parent (). Find ('. Error '). HTML (' * Please enter bank card number ');
        Paybackbank.focus ();
    Return
        } if (bankofdeposit.val () = = "") {bankofdeposit.parent (). Find ('. Error '). HTML (' * Please enter the account Bank ');
        Bankofdeposit.focus ();
    Return
        } if (telphonenum.val () = = "") {telphonenum.parent (). Find ('. Error '). HTML (' * Please enter mobile number ');
        Telphonenum.focus ();
    Return
        } if (telphonecode.val () = = "") {telphonecode.parent (). Find ('. Error '). HTML (' * Please enter Phone verification code ');
        Telphonecode.focus ();
    Return /** Verify the Phone Verification code */$.ajax ({type: "POST", url: "/qtonline/istherightlvc.html", data: {Userphone:telph
				Onenum.val (), Lvc:telphonecode.val ()}, DataType: "JSON", Success:function (a) {if (a.msg = = "Fail") {
			Alert ("Please fill in the correct phone verification code"); }else{var data = {"Money": Monthpay.val (), "Apply_money": Applypay.val (), "APP
			    Ly_time ": replacelimit.html (). substr (0,1),    	"Apply_day": Monthpaydate.val (), "Bank_card": Paybackbank.val (), "Bank_name": Bankofdeposi
				 T.val (), "User_phone": Telphonenum.val ()};  $.ajax ({type: "POST", Data:data, url: "/qtonline/applyinfo/qiantu1.html", success
					    		: function (res) {if (res.result== "success") {alert (res.msg);
					    		$ (". Qiantu-mask"). Hide ();
					    		$ ("Body"). CSS ("overflow-y", "scroll");
				    		Checkdata ();
				    		}else{alert (res.msg);
			}
					}
				});	

}
		}
    });
	    	}//Check whether the profile is audited through function checkdata () {$.ajax ({url: "/qtonline/applyinfo/checkdata.html", type: "POST",
	    		 	DataType: "JSON", success:function (data) {if (data.result== "PASS") {$ (". Qiantu-mask"). Show ();
				 $ ("Body"). CSS ("overflow-y", "hidden");
					        }else{layui.use (' Layer ', function () {var layer = Layui.layer; Layer.confirm(' The personal information is not certified and the information is available to the personal center.
					        ', function () {location.href= "/qtonline/propublish/mymonthpay.html";
				    });
				 });
}
	    	}
		});
	}//Close button function Closebtn () {$ (". Qiantu-mask"). Hide ();
$ ("Body"). CSS ("overflow-y", "scroll"); }
Core approach: laydate (options);
  The options is an object that contains the following key: ' Default '
    elem: ' #id ',//element selector event to display the date
    : ' Click ',//Trigger Event
    format: ' Yyyy-mm-dd hh:mm : SS ',//date format
    Istime:false,//Whether to open time select
    isclear:true,//whether to display empty
    istoday:true,//whether to show today
    Issure:true, Whether to show confirmation
    festival:true//Show holiday
    min: ' 1900-01-01 00:00:00 ',//Minimum date
    max: ' 2099-12-31 23:59:59 ',//maximum date
    start: ' 2014-6-15 23:00:00 ',  //start date
    Fixed:false,//whether fixed in viewable area
    zindex:99999999,//css z-index
    choose:function (dates) {//Select a good date callback

    }



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: