Outline
In the front page, often they need some 表单验证
and 额外功能
, In this, introduce some simple custom plug-ins.
Plug
① verification code
$.fn.extend({
//定义一个验证码插件
verifyCode:function () {
$(this).click(function () { //单击事件
var codepic = document.getElementById("code_get");//对应位置的id
codepic.src="/code/code?temp="+Math.random(); //验证码的控制层地址
})
}
})
- use:
<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>
② get the current user access
$.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);//将返回对象的名字写入当前元素
}
)
})
}
})
- use:
<script>
$(function () {
$("#userName").sessionUser("/user/current")
})
</script>
当前用户: <span style="color:greenyellow;height: 50px;width: 100px" id="userName" ></span>
③ time stamp shows
$.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)
}
})
- use:
<script>
$(function () {
$("#current_time").showTime();
})
</script>
<span id="current_time" style="color: darkgoldenrod"></span>
form validation
这里的验证规则,是对 EasyUI 的基础验证作了扩展
EasyUI
Examples of some of the underlying authentication:
①: input validation length: ②: Verify mailbox format: ③: User name already exists verified: The first parameter is more: the control layer address; second parameter is: the current name attribute parametervalidType:'length[0,12]'
validType:'email'
validType:'remote[\'/user/existsUser\',\'name\']'
① defined length
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
/* console.log("value:"+value+" ,param:"+param)*/
return value.length == param[0];
},
message: '请输入{0}字符.'
}
})
- use:
<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>
② repeat input verification
$.extend($.fn.validatebox.defaults.rules, {
isSame: {
validator: function(value, param){
return $("#"+param[0]).passwordbox("getValue") == value;
},
message: '两次密码输入不正确!'
},
})
- use:
<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>
③ verification file suffix
$.extend($.fn.validatebox.defaults.rules, {
isImage: {
validator: function(value, param){
var regExp=/.*\.(png|jpg|gif)$/i
return regExp.test(value)
},
message: '支持png、jpg、gif结尾的文件'
}
})
- use:
<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>