暂时只可以达到的程度简单表单验证
Posted smallteeth
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了暂时只可以达到的程度简单表单验证相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .results { border: 1px solid red; height:20px; display:none; } label { display:block; } </style> </head> <body> <form name=‘myform‘ id=‘myform‘> <label for="username"> <span>用户名:</span> <input type="text" name="username" value="" placeholder="admin"> <div class="results" id="result_username"></div> </label> <label for="password"> <span>密码:</span> <input type="password" name="password" value=""> <div class="results" id="result_password"></div> </label> <label for="age"> <span>再次输入密码:</span> <input type="password" name="password2" value=""> <div class="results" id="result_password2"></div> </label> <label for="school"> <span>学历:</span> <select name=‘school‘> <option value="1">本科</option> <option value="2">专科</option> <option value="3">高中</option> </select> </label> <label for="hobby[]"> <span>兴趣:</span> <div> <input type="checkbox" name="hobby[]" value="1"> 排球 <input type="checkbox" name="hobby[]" value="2"> 篮球 <input type="checkbox" name="hobby[]" value="4"> 足球 <input type="checkbox" name="hobby[]" value="8"> 中国足球 <input type="checkbox" name="hobby[]" value="16"> 地球 </div> <div class="results" id="result_hobby"></div> </label> <label for="from"> <span>来自:</span> <div> <input type="radio" name="from" value="1"> 东北 <input type="radio" name="from" value="2"> 华北 <input type="radio" name="from" value="3"> 西北 <input type="radio" name="from" value="4"> 华东 <input type="radio" name="from" value="5"> 华南 <input type="radio" name="from" value="6"> 华西 </div> <div class="results" id="result_from"></div> </label> <input id=‘register‘ type="button" value="提交"> </form> <table border=‘1‘> <thead > <tr> <th>用户名</th> <th>学历</th> <th>兴趣</th> <th>来自</th> <th>注册时间</th> </tr> </thead> </table> <script src=‘./jquery-1.8.3.min.js‘></script> <script> //扩展jquery把获得的值转换为json格式 $.fn.serializeObject = function(){ var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ‘‘); } else { o[this.name] = this.value || ‘‘; } }); return o; }; </script> <script> var myForm = (function(){ return { el : {}, init : function() { var that = this; $.extend(that.el,{ ‘myform‘: $(‘#myform‘), ‘username‘ : $(‘#result_username‘), ‘password‘ : $(‘#result_password‘), ‘password2‘ : $(‘#result_password2‘), ‘hobby‘: $(‘#result_hobby‘), ‘form‘ : $(‘#result_from‘), ‘register‘ : $(‘#register‘), ‘results‘ :$(‘.results‘) }) this.click_hobby(); this.click_form(); this.focus_or_blur(); this.click_register(); }, //获得焦点提示用户 focus_username : function(){ this.el.username.css({‘display‘:‘block‘}); this.el.username.html(‘只能输入中文或者英文‘); }, //失去焦点判断用户是否符合 blur_username : function(){ var pre = this.el.username.prev().val(); var reg=/^[\u4E00-\u9FA5A-Za-z]+$/; if (pre==‘‘) { this.el.username.html(‘(必填项)用户名不能为空哦‘); this.el.username.css({‘display‘:‘block‘}); return false; }else if (!reg.test(pre)) { this.el.username.html("用户名输入不合法"); this.el.username.css({‘display‘:‘block‘}); return false; }else{ this.el.username.html(""); this.el.username.css({‘display‘:‘none‘}); return false; } }, //获得焦点提示用户密码 focus_password : function(){ this.el.password.css({‘display‘:‘block‘}); this.el.password.html(‘请输入6到12位的密码‘); }, //失去焦点判断用户密码是否符合 blur_password : function(){ var pre = this.el.password.prev().val(); var reg=/^[\w]{6,12}$/; if(!reg.test(pre)){ this.el.password.html("输入的密码必须6到12位"); this.el.password.css({‘display‘:‘block‘}); return false; }else{ this.el.password.html(""); this.el.password.css({‘display‘:‘none‘}); return false; } }, //获得焦点提示用户密码 focus_password2 : function(){ this.el.password2.css({‘display‘:‘block‘}); this.el.password2.html(‘请输入6到12位的密码‘); }, //失去焦点判断用户密码是否符合 blur_password2 : function(){ var pre2 = this.el.password2.prev().val(); var pre1 = this.el.password.prev().val(); var reg=/^[\w]{6,12}$/; if(pre2!=pre1){ this.el.password2.html("两次密码不一致"); this.el.password2.css({‘display‘:‘block‘}); }else if(!reg.test(pre2)){ this.el.password2.html("输入的密码必须6到12位"); this.el.password2.css({‘display‘:‘block‘}); return false; }else{ this.el.password2.html(""); this.el.password2.css({‘display‘:‘none‘}); return false; } }, //判断hobby是否有选择 checked_hobby : function(){ var hobbyBox = this.el.hobby.prev().find(‘input‘); var len = hobbyBox.length; for(var i=0;i<len;i++){ if(hobbyBox[i].checked==true){ return true; break; } } return false; }, //判断地点是否有选择 checked_form : function(){ var formRadio = this.el.form.prev().find(‘input‘); var len = formRadio.length; for(var i=0;i<len;i++){ if(formRadio[i].checked==true){ return true; break; } } }, //是否合法点击按钮 Toggle_meet: function(){ var that = this; var len = that.el.results.length; for(var i=0;i<len;i++){ if($(that.el.results[i]).css(‘display‘) === ‘block‘){ return false; break; } } return true; }, //点击提交时做的事 click_register : function(){ var that = this; this.el.register.on(‘click‘,function(){ if(!that.checked_hobby()){ that.el.hobby.css({‘display‘:‘block‘}); that.el.hobby.html(‘至少选择一个爱好‘); } if(!that.checked_form()){ that.el.form.css({‘display‘:‘block‘}); that.el.form.html(‘请选择来自的地点‘); } that.blur_username(); that.blur_password(); that.blur_password2(); if(that.Toggle_meet){ that.myForm_ajax(); } }) }, //当用户点checkbox击时取消提示 click_hobby : function(){ var that = this; var hobbyBox = this.el.hobby.prev().find(‘input‘); hobbyBox.on(‘click‘,function(){ if(that.checked_hobby()){ that.el.hobby.css({‘display‘:‘none‘}); that.el.hobby.html(‘‘); } }) }, //当用户点radio击时取消提示 click_form : function(){ var that = this; var formBox = this.el.form.prev().find(‘input‘); formBox.on(‘click‘,function(){ if(that.checked_form()){ that.el.form.css({‘display‘:‘none‘}); that.el.form.html(‘‘); } }) }, //用户获得焦点 focus_or_blur : function(){ var that = this; this.el.username.prev().on(‘focus‘,function(){ that.focus_username(); }) this.el.username.prev().on(‘blur‘,function(){ that.blur_username(); }) this.el.password.prev().on(‘focus‘,function(){ that.focus_password(); }) this.el.password.prev().on(‘blur‘,function(){ that.blur_password(); }) this.el.password2.prev().on(‘focus‘,function(){ that.focus_password2(); }) this.el.password2.prev().on(‘blur‘,function(){ that.blur_password2(); }) }, //验证都完成请求我们想要的后台的数据 myForm_ajax : function(){ $.ajax({ url :‘./myphp.php‘, type :‘POST‘, data : $(‘#myform‘).serializeObject(), dataType:‘json‘, success : function(data){ console.log(data); } } ) } } })() myForm.init(); </script> </body> </html>
以上是关于暂时只可以达到的程度简单表单验证的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Android Material Stepper 中验证表单？
ASP.NET MVC 表单身份验证 + 授权属性 + 简单角色