AmazeUI的JS表☀格认证架构实战演练实例共享

日期：2021-01-20 类型：科技新闻 

关键词：小程序 活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序

1、要求

做一个嵌入到UTribe(一款Android App)的学员会主题活动报考系统软件前端开发网页页面，报考总数至少1人数最多4人，表格动态性提升数最多四个，在其中队名必填，大队长的全部信息内容必填，工作人员的QQ、手机上号码选填，比赛時间首选。

2、基本设计方案

这一新项目只给了大半天時间，并且以前沒有在Android端调节网页页面的工作经验，并且沒有调节合理布局的机遇，只有一次做了布署上来看一下实际效果怎样。

3、难题

自己是新手，之前做表格认证全是在递交以前用js查验一下主要参数，但这一新项目中主要参数较多，并且同一字段名的校检方法不一样（大队长QQ、手机上必填而工作人员无需），若再用以前的方式工作中量显而易见很大，有木有更强的方式呢？这时候候我觉得来到amazeUI的js认证架构，互动实际效果非常好。

科学研究了下应用方式：

先将总体目标表格关联一个validator涵数，随后在必须认证的字段名再加特性（required、pattern、mixlength这些），pattern除开HTML5中现有的email、url等正则表达式，还能够自定，最终添充function submit来明确表格信息内容都合理合法以后的实际操作。随后我将这一架构应用来到自身的新项目上，加上了自定正则表达式表述式

这儿的认证能够依据要求加上到相匹配字段名上，如大队长的QQ、手机上号码加上认证而工作人员的无需加上。

<input type="text" class="js-pattern-qq" data-validation-message="QQ号不符合合规管理范噢" 
	      	name="qq" placeholder="键入QQ号" required>
<input type="text" class="js-pattern-mobile"  data-validation-message="手机上号码不符合合规管理范噢" 
	      	name="mobile" placeholder="键入手机上号码" required>

难题1：

这啥含意呢？细心一看，原先是表述器认不出来你的validator方式把，应当是少了某一js引入，遂导包处理。

难题2：

因为工作人员表格的信息内容和大队长的很像，但我总不可以一条一条append上来吧？这会造成2个难题，第一是工作中量大，第二是编码不简约，维护保养起來不便，遂想起用clone一个写好的div模版的方式来处理。

难题3：

因为要将每一个工作人员的数据信息融合成json数字能量数组的方式传送到后台管理，在检测恳求主要参数时发觉仅有大队长有gender特性而工作人员沒有，之后发觉是由于radio一个name仅有一个值，因此要动态性更改clone模版的工作人员的表格的radio的name特性来完成不一样工作人员间gender的差别。

 var radios = template.find('input[type=radio]');
              radios.each(function(){
                  $(this).attr('name','gender'+g_index);
              })

随后就可以一切正常接受不一样工作人员的性別特性了。

难题4：

覆写完submit方式递交表格后，本来认为到这基本进行了，但检测时发觉若表格字段名不符合法，网页页面会全自动更新，提醒信息内容浮现后消退，已填写的数据信息也没有了，这显而易见不符合合应用逻辑性。之后发觉难题出在

<button type="submit" style="width: 100%;height: 100% " class="am-btn am-btn-default">报考</button>

留意这儿button的种类是submit而并不是button，submit会在递交后全自动更新网页页面，处理方法非常简单，在validator目标的submit涵数中检测主要参数时，若不符合规律return false，那样网页页面也不会全自动更新了。

submit:function(){
                      var formValidity = this.isFormValid();
                      if(formValidity){
                      	if(!member.postMembers()){
                          return false;
                      	}
                      }else{
                          alert("键入信息内容不符合法！");
                          return false;
                      }
                  }

进行实际效果展现：

amazeui认证碰到的坑

jsp样例：
form再加data-am-validator才可以使认证起效：
<form id="addPopuForm" class="add-popu-form" data-am-validator>
	<div class="inputItem">
		<div class="inputName">名字</div> <!--required必填，minlength最少长短-->
		<input type="text" id="name" name="name" class="" required minlength="2" maxlength="64" placeholder="请键入2-64位标识符" autocomplete="off">
	</div>
	<div class="inputItem"> <!--required必填-->
		<div class="inputName">性別</div>
		<select type="text" id="sex" name="sex" class="" required>
			<option selected value="">挑选</option>
			<option value="0">男</option>
			<option value="1">女</option>
		</select>
	</div>
	<div class="inputItem">
		<div class="inputName">年纪</div> <!--required必填，pattern正则表达式表述式认证-->
		<input type="text" required pattern="^([1-9]\d{0,1}|100|[1]\d{0,2}|200)$" id="age" name="age" class="" placeholder="请键入2-100" autocomplete="off">
	</div>
</form>

js：
//留意下边的坑，2个相互配合才可以起效
$("#addPopuForm").validator('destroy');//原始化，消毁以前的认证
$('#addPopuForm').validator({validateOnSubmit: true});//原始化主要参数，能够有好几个，实际见参照文本文档http://amazeui.org/javascript/validator，递交时认证，相互配合上边的消毁完成消毁

//重设表格
$("#addPopuForm")[0].reset();

//递交时开展表格认证，formValidity为true根据认证
var formValidity = $('#addPopu').validator('isFormValid');

到此这篇有关AmazeUI的JS表格认证架构实战演练实例共享的文章内容就详细介绍到这了,大量有关AmazeUI的JS表格认证內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：要我来教你应⊙ω⊙用css中的字体样式标志的方式 返回下一篇：没有了