La ejecución del proyecto -07 (personalización plugin de jQuery, validación de formularios personalizados)

contorno

En la primera página, a menudo necesitan algo 表单验证y 额外功能, en esto, introducir algunas simples plug-ins personalizados.

enchufe

① código de verificación

$.fn.extend({

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

• uso:

<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>

② conseguir el acceso del usuario actual

$.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);//将返回对象的名字写入当前元素
                }
            )
        })
    }
})    

• uso:

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


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

③ espectáculos de indicación de tiempo

$.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)
    }
})

• uso:

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


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

Validación de formularios

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

EasyUIEjemplos de algunos de la autenticación subyacente:
①: longitud de validación de entrada: ②: verificar formato de buzón: ③: Nombre del usuario ya existe verificadas: El primer parámetro es más: la dirección de capa de control; segundo parámetro es: el parámetro de nombre de atributo actualvalidType:'length[0,12]'
validType:'email'
validType:'remote[\'/user/existsUser\',\'name\']'

① longitud definida

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

• uso:

    <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>

② de entrada de verificación de repetición

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

• uso:

	<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>

③ sufijo archivo de verificación

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

• uso:

	<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>