表单中的控件

最新推荐文章于 2021-08-16 19:11:43 发布

原创最新推荐文章于 2021-08-16 19:11:43 发布 · 618 阅读

0 ·

CC 4.0 BY-SA版权

easyUI 专栏收录该内容

19 篇文章

订阅专栏

一、Form（表单）

html文件

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body>


<form id="box" method="post" action="123.html">
	<p>帐号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"></p>
	<p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"></p>
	<input type="submit">
</form>



</body>
</html>

index.js

$(function () {
	$('#box').form({
		url : 'content.php',
        //form事件onSubmit：在提交之前触发，返回 false 可以终止提交。
		onSubmit : function (param) {       
			param.code = '320902'; //传参数
            //验证后再执行提交()
            //做表单字段验证，当所有字段都有效的时候 返 回 true 。 该 方 法 使 用validatebox(验证框)插件。
			return $(this).form('validate');
		},
		success : function (data) {
			alert(data);
			//var data = eval('(' + data + ')');
			//if (data.email) {
			//	alert(data.email);
			//}

            //清理和重置
            $('#box').form('clear');
            $('#box').form('reset');
		},
	});


	/*
    //form方法load：页面加载：填充表单
	$('#box').form('load', {
		name : '蜡笔小新',
		email : 'xiaoxin@163.com',
	});
		
	$('#box').form({
		onBeforeLoad : function () {
			alert('load之前');
		},
		onLoadSuccess : function (data) {
			alert('load成功' + data.email);
		},
		onLoadError : function () {
			alert('错误');
		}
	});
	
	//读取记录填充到表单中
    //使用 load 通过 URL 填充，对方是 JSON 格式
	$('#box').form('load', 'load.php');

	*/


	//禁用和启用验证
	$('#box').form('disableValidation');
	$('#box').form('enableValidation');
	
});

二、ValidateBox（验证框）

验证输入框是否有效。

依赖关系

tooltip

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body style="margin-left:200px">

<!--
 //class 加载方式
<input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" />
-->

<input id="email" />

</body>
</html>

$(function () {
    //自定义验证
	$.extend($.fn.validatebox.defaults.rules, {
		minLength : {
			validator : function (value, param) {
				return value.length >= param[0];
			},
			message : '请输入不小于{0}的字符',
		},
	});

    //JS 加载调用
	$('#email').validatebox({
	    required: true,  //validatebox属性required：表示文本框必填
	    validType: 'minLength[5,10]',//validatebox属性validType：定义字段验证类型
		//validType : 'url',
		//validType : 'length[2,10]',
	    //validType : 'remote["content.php", "abc"]', //Ajax 远程验证,request.form["abc"],返回true,false
		//validType : ['email', 'length[5,10]'],
	    //delay : 1000,    //延迟到最后验证输入值。默认值200。
	    //missingMessage : '请输入内容', //当文本框未填写时出现的提示信息。默认值：This field is required。
	    //invalidMessage : '您输入的电子邮件格式不合法！', //当文本框的内容被验证为无效时出现的提示。默认值 null。
	    tipPosition : 'right',//定义当文本框内容无效的时候提示消息显 示 的 位 置 ， 有 效 的 值 有 ：'left','right'。默认值 right。
	    //deltaX : 100,    //提示框在水平方向上位移。默认值0
	    //novalidate : true,  //为 true 时关闭验证功能。默认值 false。
	});
	
    //console.log($('#email').validatebox('options')); //返回属性列表
    //$('#email').validatebox('destroy');//移除并销毁组件。
	
	//$(document).click(function () {
    //console.log($('#email').validatebox('validate'));验证文本框的内容是否有效
    //console.log($('#email').validatebox('isValid'));//调用 validate 方法并且返回验证结果，true 或者 false。
	//});
	
    ////禁用和启用
	//$('#email').validatebox('disableValidation');
	//$('#email').validatebox('enableValidation');
	
});

$.extend($.fn.textbox.defaults.rules, {
    minLength: {  //最小长度
        validator: function (value, param) {
            return value.length >= param[0];
        },
        message: '请输入最小{0}位字符.'
    },
    maxLength: {  //最大长度
        validator: function (value, param) {
            return param[0] >= value.length;
        },
        message: '请输入最大{0}位字符.'
    },
    length: {  //长度限制
        validator: function (value, strparam) {
            var param = strparam.split('-');
            return value.length >= param[0] && param[1] >= value.length;
        },
        message: '请输入{0}位字符.'
    },
    equals: { //两个控件值比较
        validator: function (value, param) {
            return value == $(param[0]).val();
        },
        message: '两次输入不一致.'
    },
    web: {  //URL 验证
        validator: function (value) {
            var regex = /^(http[s]{0,1}|ftp):\/\//i;
            return regex.test($.trim(value));
        },
        message: '网址格式错误.'
    },
    mobile: {  //手机号码及座机验证
        validator: function (value) {
            var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
            var isMob = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
            var arrValue = value.split(',');
            if (arrValue.length <= 1) arrValue[1] = arrValue[0];
            if ((isMob.test(arrValue[0]) || isPhone.test(arrValue[0])) && (isMob.test(arrValue[1]) || isPhone.test(arrValue[1]))) {
                return true;
            } else {
                return false;
            }
        },
        message: '电话号码格式错误.'
    },
    fax: {  //传真号码验证
        validator: function (value) {
            var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
            var isMob = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
            var arrValue = value.split(',');
            if (arrValue.length <= 1) arrValue[1] = arrValue[0];
            if ((isMob.test(arrValue[0]) || isPhone.test(arrValue[0])) && (isMob.test(arrValue[1]) || isPhone.test(arrValue[1]))) {
                return true;
            } else {
                return false;
            }
        },
        message: '传真号码格式错误.'
    },
    email: {  //邮箱验证
        validator: function (value) {
            var regex = /^[a-zA-Z0-9_+.-]+\@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,4}$/i
            return regex.test($.trim(value));
        },
        message: '电子邮箱格式错误.'
    },
    date: {  //日期验证
        validator: function (value) {
            var regex = /^[0-9]{4}[-][0-9]{2}[-][0-9]{2}$/i
            return regex.test($.trim(value));
        },
        message: '曰期格式错误,如2012-09-11.'
    },
    endThanTotay: { //时间必须大于当前时间
        validator: function (value) {
            var enddate = new Date((endTime).replace(/-/g, "/"));
            var nowdate = new Date();
            return enddate < nowdate
        },
        message: '时间不能小于当前时间.'
    },
    endThanStart: {  //结束时间小于开始时间
        validator: function (value, param) {
            var startdate = $(param).datebox("getValue");
            startdate = new Date((startdate).replace(/-/g, "/"));
            var enddate = new Date((endTime).replace(/-/g, "/"));
            return enddate > startdate
        },
        message: '结束时间小于开始时间.'
    },
    isBlank: {
        validator: function (value, param) { return $.trim(value) != '' },
        message: '不能为空，全空格也不行'
    },
    isZero: {
        validator: function (value, param) {
            return parseFloat(value) != 0
        },
        message:'不能为零'
    }
});