前端开发中快速掌握的技巧

• 之前开发过程中没有太在意前端方法的封装，最近在项目里看到别人封装的方法了，实在太有用了，自己总结了一下，好东西就应该共享一下
• 表单验证非空：
  
  • 以前我都是将需要验证的字段在js中拿到这个字段的变量，然后判断这个变量是否是空值的，相信你也是这样的，那么来看看改进之后的方法吧`/**
• 验证表单
  */

function validForm() {
    var b = true;

    // 遍历页面中，所有符合条件的控件，eg：<input type="..." verify="decimal" msg="用户名"/>
    $("body").find("*").each(function(){
        if (typeof ($(this).attr("verify")) != "undefined") {
            var data = $.trim($(this).val());
            if (data.length < 1) {
                // 数据为空时，消息提示
                var msg = $(this).attr("msg")
                msg += "，不能为空";
                $(this).focus();
                alert(msg);
                b = false;
                return b;
            }else {
                // 合法校验
                b = validData(data,$(this).attr("verify"),$(this).attr("msg"));
                if (!b) {
                    return b;
                }
            }
        }
    });

    return b;
}`

- 封装了这个方法的好处在哪里，看到里面的遍历方法了，这个方法会遍历页面中所有符合条件的空间进行非空验证，你可能会说他是如何筛选这个条件的呢，看到verify了吗，我们只需要在jsp页面中在需要验证的控件上面填一个verify字段就行了，这个字段不需要附任何值，这就是告诉我，这个空间需要进行非空验证。这里我只是提了一个非空验证，如果验证一些其他规则的就可以在Verify中传值了，这个读者可以自行扩展一下，实现好了的，希望大家也可以发给我，让我瞅瞅。
 - 下面贴个我们公司的大牛写了验``

/** * 验证基本数据格式，如果本方法未提供符合要求的验证，请自行添加，格式参照如下 */
function validData(value,type,msg){
    // 验证数字：
    if (type == 'number') {
        var reg = /^[0-9]*$/
        if (!reg.test(value)) {
            alert(msg+"，不是数字");
            return false;
        }
    }
    // 验证Email地址：
    if (type == 'email') {
        var reg = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/
        if (!reg.test(value)) {
            alert(msg+"，格式不对");
            return false;
        }
    }

    // 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$或 var regMobile=/^1[3,5,8]d{9}$/;
    if (type == 'phone') {
        var reg = /^1[3,5,8]d{9}$/
        if (!reg.test(value)) {
            alert(msg+"，不是手机号码");
            return false;
        }
    }

    // 验证电话号码：：--正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。
    if (type == 'telephone') {
        var reg = /^((d{3,4})|d{3,4}-)?d{7,8}$/
        if (!reg.test(value)) {
            alert(msg+"，不是电话号码");
            return false;
        }
    }

    // 验证身份证号（15位或18位数字）：
    if (type == 'ID') {
        var reg = /^d{15}|d{}18$/
        if (!reg.test(value)) {
            alert(msg+"，格式不正确");
            return false;
        }
    }

    // 非负浮点数（正浮点数 + 0）：^d+(.d+)?$ 或 ^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$
    if (type == 'decimal') {
        var reg = /^d+(.d{0,5})?$/
        if (!reg.test(value)) {
            alert(msg+"，格式不正确（数值类型，允许保留到小数点后5位）");
            return false;
        }
    }

    // 验证用户密码: 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。 
    if (type == 'password') {
        var reg = /^[a-zA-Z]w{5,17}$/
        if (!reg.test(value)) {
            alert(msg+"，格式不正确n正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线");
            return false;
        }
    }
    return true;
}

• 在前端我们除了验证可能遇到最多的就是与后台数据的传递，以前我都是借助框架的封装来传递的，还有就是我自己手动拼接的json，现在来看一种封装指定控件的工具

/** * 获取需要保存的页面数据 * @returns json */
function getFormData() {
    var jsonArray = [],data = {};
    // 遍历页面中，所有符合条件的input 输入类型控件，eg：<input type="..." column="columnA"/>
    $("input").each(function(i,e) {
        if (typeof ($(e).attr("column")) != "undefined") {
            data["" + $(e).attr('column')] = $(e).val();
        }
    });
    // 遍历页面中，所有符合条件的select 输入类型控件，eg：<select column="columnA">...</select>
    $("select").each(function(i,e) {
        if (typeof ($(e).attr("column")) != "undefined") {
            data["" + $(e).attr('column')] = $(e).val();
        }
    });

    // 遍历页面中，所有符合条件的textarea 输入类型控件，eg：<textarea column="columnA">...</textarea>
    $("textarea").each(function(i,e) {
        if (typeof ($(e).attr("column")) != "undefined") {
            data["" + $(e).attr('column')] = $(e).val();
        }
    });
    jsonArray.push(data);
    // 转译为字符串 ，以“dd”标识，用于后台controller接收，eg： "[{'columnA':'valueA','columnB':'valueB'}]"
    var jsondata = {
        "zxh" : JSON.stringify(jsonArray)
    };
    return jsondata;
}

- 这个和验证是一样的，我将jsp中所有具有column属性的空间的值拿过来进行封装在json中，在json中的名称就是column字段属性的名称，最后将这个字符串返回出来，我们就可以在ajax中将这个字符串当做参数传递到后台，因为参数中的是zxh，所以我在后台中的接受就需要接受这个zxh,这样我们就拿到的jsp中的数据，在后台拿到数据了，作为程序员的你应该懂得

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!