支付宝alice的表单验证

最新推荐文章于 2021-07-30 08:42:57 发布

非思丸智能

最新推荐文章于 2021-07-30 08:42:57 发布

阅读量1.1k

点赞数

分类专栏：程序

本文链接：https://blog.csdn.net/zhangman117/article/details/35548033

版权

程序专栏收录该内容

30 篇文章 0 订阅

订阅专栏

最近写一个表单验证，用了支付宝的one.css，也是我们现在核心的css，以此为基础的扩展，没别的，就是简单扁平化页面设计，下面看看表单验证的全部代码

页面部分代码：

<div class="ui-box-container">
<div class="ui-box-content">
<form class="ui-form" name="" method="post" id="">
<fieldset>
<legend>重置密码</legend>

<div class="ui-form-item">
<label for="" class="ui-label"><span class="ui-form-required">*</span>平台账号 </label>
<input class="ui-input" type="text" id="com" name="com"/>
<p class="ui-form-explain ui-tiptext ui-tiptext-error" id="comNote"></p>
</div>
<div class="ui-form-item">
<label for="" class="ui-label"><span class="ui-form-required">*</span>电子邮件 </label>
<input class="ui-input" type="text" id="email" name="email"/>
<p class="ui-form-explain ui-tiptext ui-tiptext-error" id="emailNote"></p>
</div>
<div class="ui-form-item">
<label for="" class="ui-label"><span class="ui-form-required">*</span>输入新密码 </label>
<input class="ui-input" type="password" id="pwd1" name="pwd1"/>
<p class="ui-form-explain ui-tiptext ui-tiptext-error" id="pwd1Note"></p>
</div>
<div class="ui-form-item">
<label for="" class="ui-label"><span class="ui-form-required">*</span>再输入一遍 </label>
<input class="ui-input" type="password" id="pwd2" name="pwd2"/>
<p class="ui-form-explain ui-tiptext ui-tiptext-error" id="pwd2Note"></p>
</div>
<div class="ui-form-item">
<input type="button" class="ui-button ui-button-morange" value="重置密码" οnclick="doSumbit();">
<input type="button" class="ui-button ui-button-mwhite" value="取消" οnclick="closeSumbit();">
</div>
</fieldset>
</form>
</div>
</div>

脚本部分代码：

$("#email").focusin(function () {
$("#emailNote").html('<i class="ui-tiptext-icon iconfont" title="出错"></i>电子邮件必须填写！');
$(".ui-form-item").eq(1).addClass("ui-form-item-error");
}).focusout(function () {
if ($("#email").val() == ""){
$("#emailNote").html('<i class="ui-tiptext-icon iconfont" title="出错"></i>电子邮件必须填写！');
$(".ui-form-item").eq(1).addClass("ui-form-item-error");
} else{
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/employe/emailCheckEmail.action",
data: {com:$("#com").val(),email:$("#email").val()},
dataType:"text",
cache : false,
async : false,
success: function(data){
var dataObj=eval("("+data+")");
var repeat=dataObj.repeat;
if(repeat==""){
$("#emailNote").removeClass().addClass("ui-form-explain ui-tiptext ui-tiptext-success");
$("#emailNote").html('<i class="ui-tiptext-icon iconfont" title="成功"></i>');
$(".ui-form-item").eq(1).removeClass("ui-form-item-error");
}else{
$("#emailNote").html('<i class="ui-tiptext-icon iconfont" title="出错"></i>'+repeat);
}
}
});
}
});
$("#pwd1").focusin(function () {
$("#pwd1Note").html('<i class="ui-tiptext-icon iconfont" title="出错"></i>密码必须填写！');
$(".ui-form-item").eq(2).addClass("ui-form-item-error");
}).focusout(function () {
if ($("#pwd1").val() == ""){
$("#pwd1Note").html('<i class="ui-tiptext-icon iconfont" title="出错"></i>密码必须填写！');
$(".ui-form-item").eq(2).addClass("ui-form-item-error");
}
else{
$("#pwd1Note").removeClass().addClass("ui-form-explain ui-tiptext ui-tiptext-success");
$("#pwd1Note").html('<i class="ui-tiptext-icon iconfont" title="成功"></i>');
$(".ui-form-item").eq(2).removeClass("ui-form-item-error");
}
});
$("#pwd2").focusin(function () {
$("#pwd2Note").html('<i class="ui-tiptext-icon iconfont" title="出错"></i>必须填写！');
$(".ui-form-item").eq(3).addClass("ui-form-item-error");
}).focusout(function () {
if ($("#pwd2").val() == ""){
$("#pwd2Note").html('<i class="ui-tiptext-icon iconfont" title="出错"></i>必须填写！');
$(".ui-form-item").eq(3).addClass("ui-form-item-error");
}
else if($("#pwd1").val()!=$("#pwd2").val()){
$("#pwd2Note").html("");
$("#pwd2Note").html('<i class="ui-tiptext-icon iconfont" title="出错"></i>密码不一致');
$(".ui-form-item").eq(3).addClass("ui-form-item-error");
}
else{
$("#pwd2Note").removeClass().addClass("ui-form-explain ui-tiptext ui-tiptext-success");
$("#pwd2Note").html('<i class="ui-tiptext-icon iconfont" title="成功"></i>');
$(".ui-form-item").eq(3).removeClass("ui-form-item-error");
}
});

这里重点说明下 $(".ui-form-item").eq(3)，有朋友说是$(".ui-form-item")[3]其实找不到，查了相关资料，标准写法应该是 $(".ui-form-item").eq(3) ,这样就不用在页面定义非常多的id，通过class定位到相关行。有需要的朋友可以借鉴一下。

郑州就维软件 www.zzjiuwei.com