`

表单校验的二三事

阅读更多

1,什么会触发表单校验

(a)文本框失去焦点



 

(b)点击按钮



 

(c)提交表单

 

2,有哪几种校验方式

(1)同步方式

为空判断,格式判断(包括长度判断)

(2)异步方式

通过ajax(获取jsonp)调用后台接口来校验

 

下面的校验就会有问题

inputs.push(
            new TextBox(Cjt.byId('identityTF'), {
                validate: function () {
                    if (this.el.value.length == 0) {
                        tip.error(me._error.mobile_is_null);
                        return false;
                    }else if (!util.isMobileNo(this.el.value)){
                        tip.error(me._error.mobile_Format_wrong);
                        return false;
                    }else{
                        Cjt.get('/register/findUserIdentify', {uid: this.el.value}, function (resp) {
                            console.log(resp);
                            if(resp.exists && resp.exists==1){
                                tip.error("该手机已注册,您可直接<a href='/wap/login.html' >登录</a>");
                                return false;
                            }
                        });
                    }
                    return true;
                }
            })
        );

 问题:在方法返回之后,ajax还没有执行完毕

解决方法:

common.findUserIdentify(mobileVal, function () {
                tip.error("该手机已注册,您可直接<a href='/wap/login.html' >登录</a>");
                return false;
            }, function () {
                console.log('开始发送短信');
                Cjt.post('/wap/bindMobile', data, function (resp) {
                    console.log(resp);
                    if (resp.result) {
                        tip.success('验证码已发送,请查收');
                        sendCodeBtn.disable($(node));
                        me._data.bind.secondCount = 10;
                        console.log(me._data);
                        me._data.bind.intervalHook = setInterval(SMSbtnTiming, 1000);
                    } else {//发送短信验证码成功,开始倒计时
                        tip.error(resp.errorMessage);
                    }
                })
            })

 ---------- 2016年5月9日更新 ---------

 表单校验规则:

(1)第一次进入表单页面,校验所有输入控件,但是不显示任何错误提示



 

(2)文本框失去焦点时校验所有输入控件(文本框,复选框等),但是只有本文本框显示错误提示,其他文本框不显示错误提示

(3)取消选中"协议"时,不校验表单,直接使"立即购买"置灰.

因为没有必要校验表单,都不同意协议了,肯定不允许购买.

下单页校验规则:
(a)进入下单页时,校验所有输入控件(文本框,复选框等),决定"立即购买"按钮是否可用,但是不显示任何错误提示;
(b)编辑输入框时,不校验,只有失去焦点才校验,若校验不通过,则显示本输入控件的错误提示;
在输入(keyup)过程中会实时计算价格
(c)取消选中"同意《畅捷通租凭服务协议》"时,不校验表单,"立即购买”按钮置灰;
(d)选中"同意《畅捷通租凭服务协议》"校验表单,但是不显示任何错误提示
  • 大小: 68.1 KB
  • 大小: 68.5 KB
  • 大小: 23.4 KB
  • 大小: 136.7 KB
0
1
分享到:
评论

相关推荐

    Web通用的表单校验JS

    在Web开发中,表单是收集用户数据的重要途径,而表单校验则是确保这些数据质量和安全的关键步骤。本文将详细介绍一种通用的JavaScript(JS)表单校验方法,通过导入特定的JS文件,可以轻松实现对用户输入的验证。 ...

    表单校验&文件下载

    在IT领域,表单校验和文件下载是两个重要的概念,尤其在Web开发中起着至关重要的作用。这里我们将深入探讨这两个主题,并结合在MyEclipse中直接运行的上下文来理解它们。 首先,让我们聊聊“表单校验”。表单是用户...

    jq 表单校验工具

    在网页开发中,表单是收集用户数据的重要途径,而有效的表单校验则是确保数据质量和用户体验的关键步骤。"jq 表单校验工具"是一个专门用于JavaScript(js)和jQuery(jq)环境的插件,它提供了强大的功能来帮助...

    JS校验,提供公共的JS表单校验

    公共JS校验,提供了常见的JS前台表单校验

    js表单校验脚本,简单方便

    依赖jQuery的表单校验脚本,在使用此脚本之前请先引入jQuery文件

    jquery的validate表单校验插件

    《jQuery的validate表单校验插件深度解析》 在前端开发中,表单校验是必不可少的一个环节,它能够确保用户输入的数据符合预设的规范,提高用户体验并减轻服务器端的压力。jQuery的validate插件作为一款强大的表单...

    基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的...

    jquery加强和表单校验插件的使用

    jquery的基础使用和表单校验插件的使用。

    表单校验(构造函数的写法)

    在JavaScript编程中,表单校验是不可或缺的一部分,它用于确保用户输入的数据符合特定的格式和规则,从而提高用户体验并防止无效数据提交到服务器。在本案例中,开发者使用了构造函数的方式来实现自定义的表单校验...

    JS校验表单参数是否正确的小工具

    JS校验工具类,已经过测试。包含: 1.校验特殊字符 2.限制表单输入长度 3.是否包含小数 4.校验是否身份证号码 5.校验是否是中文 6.校验是否包含数字

    简单表单校验

    校验表单,支持远程校验

    js通用表单校验

    通用的js表单校验脚本

    struts2笔记之校验表单信息

    总结来说,Struts2的表单校验机制提供了多种灵活的方式,开发者可以根据实际需求选择适合的校验策略,确保用户输入的数据准确无误,从而提高应用的安全性和稳定性。无论是使用XML配置文件、注解还是自定义校验方法,...

    jQuery的表单校验插件validate

    jQuery的表单校验插件`validate`是前端开发中常用的一个工具,它极大地简化了对HTML表单数据的验证过程。这个插件基于流行的JavaScript库jQuery构建,为开发者提供了丰富的选项和方法来定制表单验证规则,确保用户...

    Flex表单校验组件

    Flex表单校验组件是基于Adobe Flex开发的一款强大的前端验证工具,它专为构建具有高效数据验证功能的用户界面而设计。在Web应用程序中,表单校验是必不可少的,因为它确保用户输入的数据符合预定义的规则,从而提高...

    用于动态的表单信息校验

    用于动态的表单信息校验,不利于传统的校验

    JavaScript的form表单验证中的身份证校验.pdf

    在进行Web应用程序开发时,表单验证是一项非常重要的功能,它可以确保用户输入的数据格式正确并符合预期的要求。其中,身份证号码验证尤其重要,因为它涉及到个人信息的真实性和合法性。本文将详细介绍如何使用...

    网页用户注册表单校验JavaScript脚本代码源码下载

    简单的网页用户注册表单的校验,提供给大家学习,借鉴,完整代码已经打包,欢迎下载。截取一部分代码,如下: function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//...

    jQuery表单校验插件validate实例代码集

    jQuery表单校验插件validate实例代码集 有多个表同的表单,来共同展现表单验证插件的各种用法,包括判断字符、输入为空、类型判断、适时Ajax方式提示等,通过这些实例可快速掌握验证的方法和要点,此前,源码爱好者...

    ext_表单提交_数据校验

    ### ext_表单提交_数据校验:深入解析与实践 #### 一、文本框输入控件(Ext.form.TextField) 在Ext JS框架中,`Ext.form.TextField`是一种用于收集用户输入的基本控件,它提供了丰富的配置选项来实现数据校验。...

Global site tag (gtag.js) - Google Analytics