项目实施-07 （Jquery插件定制、表单验证定制）

概述

在前端页面中，往往需要一些表单验证和额外功能，在本篇中，介绍了一些简单的定制插件。

插件

①验证码

$.fn.extend({

    //定义一个验证码插件
    verifyCode:function () {
        $(this).click(function () {  //单击事件
            var codepic = document.getElementById("code_get");//对应位置的id
            codepic.src="/code/code?temp="+Math.random(); //验证码的控制层地址
        })
    }
})    

• 使用：

<script>
$(function () {
   $("#code_get").verifyCode()
})
</script>


<div  style="float: left;width: 60%;height:100%;">
    <img id="code_get" src="/code/code" alt="" style="width: 100%;height: 90%">  
</div>

②获取当前访问用户

$.fn.extend({
 
    //定义一获取当前用户会话属性的插件
    sessionUser:function (option) {
        //定义一个默认的访问地址，在接收option后，对其进行覆盖，方便使用者在参数中自定义访问地址
        var defaultUrl = { url:"/user/current"}
        //参数传递的地址替换默认地址
        option = $.extend(defaultUrl,option);
        //获取属性
        $(this).each(function (i, item) {
            //发送ajax请求
            $.get(
                option.url,//访问地址
                //处理结果
                function (data) {
                    $(item).text(data.name);//将返回对象的名字写入当前元素
                }
            )
        })
    }
})    

• 使用：

<script>
 $(function () {
        $("#userName").sessionUser("/user/current")
})
</script>


 当前用户: <span  style="color:greenyellow;height: 50px;width: 100px" id="userName" ></span>

③时间戳展示

$.fn.extend({
  
    //定义一个时间戳插件
    showTime:function () {
        var content = $(this)
        //定义一个频率为1s的定时器
        setInterval(function () {
            var day = new Date();
            //定义一个数组
            var week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            //返回时间戳
            content.text("(｡･∀･)ﾉﾞ\t"+day.getFullYear()+"年"+(day.getMonth()+1)+"月"+day.getDate()+"日"+day.getHours()+":"+day.getMinutes()+":"+day.getSeconds()+"\t"+week[day.getDay()]);
        },1000)
    }
})

• 使用：

<script>
 $(function () {
        $("#current_time").showTime();
})
</script>


<span id="current_time" style="color: darkgoldenrod"></span>

表单验证

这里的验证规则，是对 EasyUI 的基础验证作了扩展

EasyUI的部分基础验证实例：
①：输入长度验证：validType:'length[0,12]'
②：邮箱格式验证：validType:'email'
③：用户名已存在验证：validType:'remote[\'/user/existsUser\',\'name\']'
以上第一个参数是：控制层地址；第二个参数是：当前参数属性名

① 限定长度

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
        validator: function(value, param){
          /*  console.log("value:"+value+" ,param:"+param)*/
            return value.length == param[0];
        },
        message: '请输入{0}字符.'
    }
})

• 使用：

    <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
        <input class="easyui-passwordbox" name="password" data-options="required:true,prompt:'密码',iconCls:'icon-lock',validType:'minLength[6]'" style="height: 100%;width: 100%" >
    </div>

② 重复输入校验

$.extend($.fn.validatebox.defaults.rules, {
    isSame: {
        validator: function(value, param){
            return  $("#"+param[0]).passwordbox("getValue") == value;
        },
        message: '两次密码输入不正确！'
    },
})

• 使用：

	<div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
        <input class="easyui-passwordbox"  id="register_pwd1" name="password" data-options="required:true,prompt:'密码',iconCls:'icon-lock',validType:'minLength[6]'"  style="height: 100%;width: 100%" >
    </div>
    
    <div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
        <input class="easyui-passwordbox"  data-options="required:true,prompt:'再次输入密码',validType:'isSame[\'register_pwd1\']',iconCls:'icon-key'" style="height: 100%;width: 100%" >
    </div>

③验证文件后缀

$.extend($.fn.validatebox.defaults.rules, {
 
    isImage: {
        validator: function(value, param){
            var regExp=/.*\.(png|jpg|gif)$/i
            return  regExp.test(value)
        },
        message: '支持png、jpg、gif结尾的文件'
    }
})

• 使用:

	<div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
        <input class="easyui-filebox" name="multipartFile" data-options="required:false,prompt:'头像',iconCls:'icon-more',validType:'isImage'"  style="height: 100%;width: 100%" >
    </div>