JQuery002: 表单验证及ajax数据提交

一、三种情况下触发验证事件

输入框失去焦点 -> $('input[!type=button]').blur(function() {})
输入框输入中 -> $('input[!type=button]').bind('input propertychange', function() {})
点击提交表单时 -> $('input[type=button]').onclick(function(){ $.ajax({ }) })

表单HTML部分如下

<form id="signup_valid" name="signup_form"><a class="signup_btn_close" href="javascript:" onclick="signupLayer('signup_layer', false)"></a><h1 class="signup_top"><em class="l"></em>报名资料<em class="r"></em></h1><div class="signup_center"><div class="el"><input id="signup_city" class="in" name="signup_city" type="text" placeholder="城市" /></div><div class="el"><input id="signup_com" class="in" name="signup_com" type="text" placeholder="学校" /></div><div class="el"><input id="signup_name" class="in" name="signup_name" type="text" placeholder="联系人姓名" /></div><div class="el"><input id="signup_tel" class="in" name="signup_tel" type="text" placeholder="联系电话" /></div></div><div class="signup_bottom"><input id="signup_submit" class="signup_btn" type="button" value="立即报名" /></div>
</form>

二、表单验证及ajax异步提交数据JS

// 弹框弹出关闭事件
// 触发元素中加入onclick="signupLayer('弹框层ID', Boolean)"
// Boolean=>true 或 false, 弹出为true, 关闭为false
function signupLayer(el, dis) {var isShow = dis ? "block" : "none";// 获取弹框元素$("#" + el).css('display', isShow);// 遮罩层$("#layer_back_drop").css('display', isShow);
}// 定义待验证项
var validate = {signup_city: {required: true, // 必填项maxLength: 4  // 长度项},signup_com: {required: true,maxLength: 20},signup_name: {required: true,maxLength: 4},signup_tel: {required: true,mobile: true}/**待验证元素ID: {验证项: value}*/
};
// 定义错误信息提示
var msg = {signup_city: {required: '请输入城市',maxLength: '输入超出4个汉字'},signup_com: {required: '请输入学校名称',maxLength: '输入超出20个汉字'},signup_name: {required: '请输入姓名',maxLength: '输入超出4个汉字'},signup_tel: {required: '请输入手机号',mobile: '请输入正确的手机号'}/**待验证元素ID: {验证项: 错误提示信息}*/
};
// 定义验证方法
var methods = {// 必填项required: function(value) {// 去除首尾空格// !String.prototype.trim 用于兼容IE版本var v = !String.prototype.trim ? value.replace(/^\s+|\s+$/gm, '') : value.trim();// 为空返回false, 有值返回truereturn Boolean(v);},// 最大长度// value -> 输入的值；length => validate中定义的maxlength值maxLength: function(value, length) {// 去除首尾空格var v = !String.prototype.trim ? value.replace(/^\s+|\s+$/gm, '') : value.trim();// 匹配非中文字符，用于重新计算长度var chNon = v.match(/[^\u4E00-\u9FA5\uf900-\ufa2d]+/g) ? v.match(/[^\u4E00-\u9FA5\uf900-\ufa2d]+/g).join('') : '';// 匹配中文字符var ch = v.match(/[\u4E00-\u9FA5\uf900-\ufa2d]+/g) ? v.match(/[\u4E00-\u9FA5\uf900-\ufa2d]+/g).join('') : '';// 4个非中文字符按一个中文字符计算，相加换算最终长度var vLen = chNon.length + (ch.length * 4);// 小于限定长度则返回true，大于限定长度则返回falsereturn vLen <= length;},// 手机号码mobile: function(value) {// 去除空值var v = value.replace(/\s/g, "");// 手机号码的格式匹配var res = /^(0|86|17951)?(13[0-9]|15[012356789]|16[6]|19[89]]|17[01345678]|18[0-9]|14[579])[0-9]{8}$/;// 匹配一致则返回true，否则falsereturn res.test(v);}
};// 定义可调用的函数
function validEvent(e) {// 每次触发该事件前，若当前元素已有错误提示，则移除（避免重复返回错误提示信息）$(e).siblings('.error').remove(); var error = $('<label class="error"></label>'); // 创建错误提示信息容器var errorText; // 错误提示信息文本var key = e.id; // 当前触发元素的idvar len = validate[key].maxLength * 4;  // 当前触发元素的限定长度，非中文字符占4个中文字符长度var val = e.value; // 当前触发元素的输入值// 元素定义的验证项var rq = validate[key].required,mx = Boolean(validate[key].maxLength),ph = Boolean(validate[key].mobile);// 元素定义的验证处理事件var v_rq = methods.required(val),v_mx = methods.maxLength(val, len),v_ph = methods.mobile(val);/** 此处的判断逻辑待后续优化，感觉不是很美好 **/if (rq && !v_rq) {// 必填元素为空时执行errorText = msg[key].required;error.text(errorText);$(e).removeClass('valid')$(e).after(error);} else if (v_rq && mx && !v_mx) {// 元素不为空但长度超出限定执行errorText = msg[key].maxLength;error.text(errorText);$(e).removeClass('valid')$(e).after(error);} else if (v_rq && ph && !v_ph) {// 元素不为空，但不符合输入规范执行此errorText = msg[key].mobile;error.text(errorText);$(e).removeClass('valid')$(e).after(error);}// 为通过验证的元素添加validClass// 为后续提交表单检测提供服务// 感觉不是很美好，后续进行优化if ((v_rq && v_mx) || (v_rq && v_ph)) {var valid = $(e).hasClass('valid');if (!valid) $(e).addClass('valid');}}$(function() {// 获取表单中待验证的元素，排除input[type!=button]// 此次做的是非常简单的一个验证提交，只对input[type=text]进行验证var $valid = $('#signup_valid').find('input[type!=button]');// each循环执行$valid.each(function() {$(this).blur(function(){// 元素失去焦点后执行事件,validEvent(this);});$(this).bind('input propertychange', function(){// 元素值发生变化后执行事件,validEvent(this);});})// 点击提交$('#signup_submit').click(function() {var validAll = []; // 定义一个空数组，用于存储通过验证的元素项var data = {}; // 定义一个空对象，用于传输的数据值$valid.each(function() {// 循环执行validEvent(this);// 通过判断待验证的元素class是否具备valid// 具备valid则证明验证项通过输入正确，插入数组validAll中if ($(this).hasClass('valid')) {validAll.push(this.id);}var key = this.name; // 元素namevar value = this.value; // 元素输入的值data[key] = value; // 将每一个each循环到的元素插入对象data中})// 通过判断validAll数组长度与待验证项是否匹配，来确定表单是否通过验证，执行提交// $valid.length好像不太对，应该获取validateif (validAll.length == $valid.length) {// 通过则执行如下，ajax异步提交$.ajax({type: "POST",url: "./post.php",data: data,dataType: "html",success:function showResponse(responseJson, statusText) {$('#signup_sucess .signup_suc p').remove(); // 避免后续多次提交，重复插入提示信息，执行前先移除，无则不执行此段$('#signup_sucess .signup_suc').append('<p>报名成功</p>'); // 插入提示信息$('#signup_sucess').show().delay(3000).fadeOut(); // 显示3秒后自动隐藏$('#layer_back_drop').delay(3000).fadeOut(); // 遮罩层同上}})}})
});

三、提交成功的提示弹框及遮罩层HTML

<div id="signup_sucess" class="popup_wrap" style="display: none;"><div class="signup_suc"><a class="signup_sucess_close" href="javascript:" onclick="signupLayer('signup_sucess', false)"></a></div>
</div>
<div id="layer_back_drop" class="layer_back_drop" style="display: none;"></div>

四、实现效果

五、Node.js 服务器的搭建见前面的学习

Vue学习-001：Vue-Resource 实现登录_LaLaLa_CZ的博客-CSDN博客

JQuery002: 表单验证及ajax数据提交相关推荐

ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]
一.截图和示例共用Ext.FormPanel 1.1 截图由于本文主要关注的是表单提交的几种方式,所以仅用了一个表单项以便于测试和减少示例代码. 1.2 示例共用Ext.FormPanel ...
html怎么校验用户名重复,layui的表单验证支持ajax判断用户名是否重复的实例
如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. ht ...
html表单发送json,在HTML表单上发送JSON数据提交
我有一个html表单,该表单有两个字段(名称,说明).当用户点击该表单的提交按钮时,我想以json格式提交表单数据.在HTML表单上发送JSON数据提交我试过如下: function submitD ...
asp.net接受表单验证格式后再提交数据_如何解析 el-form-renderer 表单渲染器1.14.0...
DEEPEXI 大前端常人道,一入开发深似海,技术学习无止境.在新技术层出不穷的前端开发领域,有一群身怀绝技的开发,他们在钻研前沿技术的同时,也不忘分享他们的成果,回馈社区.下面,就由小水滴带大家看 ...
asp.net接受表单验证格式后再提交数据_看滴普科技大前端如何玩转el-form-renderer 表单渲染器1.14.0
DEEPEXI 大前端常人道,一入开发深似海,技术学习无止境.在新技术层出不穷的前端开发领域,有一群身怀绝技的开发,他们在钻研前沿技术的同时,也不忘分享他们的成果,回馈社区.下面,就由小水滴带大家看 ...
asp.net接受表单验证格式后再提交数据_创建一个注册界面，并记录到数据库中...
demo开始时我们需要准备点东西 1.jQuery 可以去cdn.js上copy一个, 2.我们要安装好node.js, 因为需要自己搭建一个服务器去测试,32位,64位,下载后配置好就行 3.开始写 ...
ajax提交form表单到php,ajax如何提交form表单数据？ajax提交form表单数据的方法介绍...
对于form表单数据的提交,我们一般都会想到使用ajax提交,那么,ajax如何来提交form表单数据呢?接下来的这篇文章就来给大家来介绍关于ajax提交form表单数据方法,有需要的伙伴可以参考一下 ...
bootstrapValidator验证表单验证通过但无法提交form的原因
bootstrapValidator验证时,使用submit提交表单,验证通过,页面没有错误信息.但submit按钮未没有提交. 原因 : submit标签的name或id属性值为submit. $( ...
ajax实现表单验证 html,Ajax+ajax做的表单验证
//Ajx实现异步示例,blur实现失去焦点触发 jQuery('#formname').blur(check); function check(){ alert("开始执行Ajax&quo ...

JQuery002: 表单验证及ajax数据提交

一、三种情况下触发验证事件

二、表单验证及ajax异步提交数据JS

三、提交成功的提示弹框及遮罩层HTML

四、实现效果

JQuery002: 表单验证及ajax数据提交相关推荐

最新文章

热门文章