前端标准化（PC）

其他 2019-05-07 02:38:51 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010261924/article/details/83417230 
<div class="warp container">
		<form id="frm" name="frm" action="">
		<input type="hidden" id="userid" name="userid" value="{$user.itemid}">
		<div id="divform">
			<div class="clear"></div>
			<div class="divformrow">
					<span class="label"><em class="fontRed mr5">*</em>公司名称：</span>
					<span class="divformcol">
					<input type="text" class="" placeholder="请输入公司名称" maxlength="50" id="companyname" name="companyname" />
					<label class="info">请输入工商注册名称，个体经营者按姓名+个体经营</label>
					<label class="validform_wrong">请输入公司名称</label>
					</span>
			</div>
			<div class="clear"></div>
			<div class="divformrow">
					<span class="label">联系人：</span>
					<span class="divformcol">
					<input type="text" class="" placeholder="请输入联系人" maxlength="50" id="contact" name="contact" />
					<label class="info">请输入联系人</label>
					<label class="validform_wrong">请输入联系人</label>
					</span>
			</div>
			<div class="clear"></div>
			<div class="divformrow">
					<span class="label">联系电话：</span>
					<span class="divformcol">
					<input type="text" class="" placeholder="请输入联系电话" maxlength="50" id="telephone" name="telephone" />
					<label class="info">请输入联系电话</label>
					<label class="validform_wrong">请输入联系电话</label>
					</span>
			</div>
			<div class="clear"></div>
      <div class="divformrow">
				<span class="label">成立年份：</span>
				<span class="divformcol">
				<input type="text" class="" placeholder="请输入成立年份" maxlength="50" id="regyear" name="regyear" />
				<label class="info">请输入成立年份</label>
				<label class="validform_wrong">请输入成立年份</label>
				</span>
			</div>
			<div class="clear"></div>
      <div class="divformrow">
				<span class="label">注册资本：</span>
				<span class="divformcol">
				<input type="text" class="" placeholder="请输入注册资本" maxlength="50" id="capital" name="capital" />
				<label class="info">请输入注册资本</label>
				<label class="validform_wrong">请输入注册资本</label>
				</span>
			</div>
			<div class="clear"></div>
      <div class="divformrow">
				<span class="label">主营产品：</span>
				<span class="divformcol">
				<input type="text" class="" placeholder="请输入主营产品" maxlength="50" id="business" name="business" />
				<label class="info">请输入主营产品</label>
				<label class="validform_wrong">请输入主营产品</label>
				</span>
			</div>
      <div class="clear"></div>
      <div class="divformrow">
				<span class="label">品牌：</span>
				<span class="divformcol">
				<input type="text" class="" placeholder="请输入品牌" maxlength="50" id="brand" name="brand" />
				<label class="info">请输入品牌</label>
				<label class="validform_wrong">请输入品牌</label>
				</span>
			</div>
			<div class="clear"></div>
			<div class="divformrow">
				<span class="label">产地：</span>
				<span class="divformcol">
				<input type="text" class="" placeholder="请输入产地" maxlength="50" id="origin" name="origin" />
				<label class="info">请输入产地</label>
				<label class="validform_wrong">请输入产地</label>
				</span>
			</div>
			<div class="clear"></div>
      <div class="divformrow">
					<span class="label">营业执照：</span>
					<span class="divformcol">
						<input id="c-thumb" class="form-control" size="50" name="row[thumb]" type="text" value="" />
						<button type="button" id="plupload-thumb" class="btn btn-danger btnchkcode plupload" data-input-id="c-thumb" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-thumb"><i class="fa fa-upload"></i>上传</button>
						<span class="msg-box n-right"></span>
					<label class="info">请输入营业执照</label>
					<label class="validform_right">请输入营业执照</label>
					</span>
					<ul class="list-inline plupload-preview" id="p-thumb">

					</ul>
			</div>
			<div class="clear"></div>
      <div class="divformrow">
					<span class="label">资质证件：</span>
					<span class="divformcol">
						<input id="c-thumbl" class="form-control" size="50" name="row[thumbl]" type="text" value="" />
						<button type="button" id="plupload-thumbl" class="btn btn-danger btnchkcode plupload" data-input-id="c-thumbl" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-thumbl"><i class="fa fa-upload"></i>上传</button>
						<span class="msg-box n-right"></span>
					<label class="info">请输入资质证件</label>
					<label class="validform_right">请输入资质证件</label>
					</span>
					<ul class="list-inline plupload-preview" id="p-thumbl">

					</ul>
			</div>
			<div class="clear"></div>
			<div class="divformrow">
				<span class="label">公司简介：</span>
				<span class="divformcol">
				<textarea id="content" name="content" rows="8" cols="100"></textarea>
				<label class="info">请输入公司简介</label>
				<label class="validform_wrong">请输入公司简介</label>
				</span>
			</div>
			<div class="clear"></div>
			<div class="divformrow">
					<input type="button" id="button6" name="button6" class="btnsb" value="提交" />
			</div>
			<div class="clear"></div>
			<p>&nbsp;</p>
		</div>
		</form>
  </div>

css

#divform{width:80%; margin: 0 auto;}
#divform .divformrow{line-height: 34px; padding-top: 9px;}
#divform .divformrow .btnsb{margin: 0 auto; display:block;width: 120px;
		background: #77C019;color: #FFFFFF;line-height: 32px;font-size: 14px;
    border: none;border-radius: 4px;text-align: center;font-weight: bold;}
#divform .divformrow .label {
  	float: left;width: 15%;overflow: hidden;font-size: 18px;color: #505050;height: 40px;line-height: 40px;
}
#divform .divformrow .label em{margin-right: 5px; color: #e60011;text-align: right;}
#divform .divformrow .divformcol{width: 75%;position:relative;}
#divform .divformrow .divformcol select{color: #999999;
    font-family: arial;font-size: 14px;padding: 5px 5px 5px 18px;}
#divform .divformrow .divformcol input{float: left;
    width:65%;height: 40px;line-height: 40px;border: 1px solid rgba(28,87,134,0.1);padding: 0 10px;
    font-size: 16px;color: #333;
}
#divform .divformrow .divformcol input.btnchkcode{width:90px;padding-left: 2px;
		background: #77C019;color: #FFFFFF;line-height: 24px;font-size: 14px;position:absolute;
    border: none;border-radius: 4px;text-align: center;font-weight: bold;right:0;top:0;
}
#divform .divformrow .divformcol button.btnchkcode{width:90px;padding-left: 2px;
		background: #77C019;color: #FFFFFF;line-height:40px;font-size: 14px;position:absolute;
    border: none;border-radius: 4px;text-align: center;font-weight: bold;right:0;top:0;
}
#divform .divformrow .divformcol input.validerror{background-color: #fff;border: 1px solid red;}
#divform .divformrow .divformcol .info{display: none; color: rgb(102, 102, 102);}
#divform .divformrow .divformcol .validform_wrong{color: red;padding-left: 20px;white-space: nowrap;display:none;
    background: url(https://qd.andiff.net/script/form/image/check_error.gif) no-repeat;height: 38px;line-height: 38px;margin-left: 10px;
}
#divform .divformrow .divformcol .validform_right{
		background: url(https://qd.andiff.net/script/form/image/check_right.gif) no-repeat;display:none;
		height: 38px;line-height: 38px;margin-left: 10px;padding-left: 20px;
}
#divform .form_title {margin-top: 10px;padding: 0 0 10px 10px;
    border-bottom: #CCCCCC 1px solid;font-weight: bold;font-size: 16px;color: #FF6600;
}
#divform .divformrow .plupload-preview {
    padding: 10px 10px; margin-bottom: 0;display:block;width:98%;text-align:center;
}
#divform .divformrow .list-inline > li {
    display: inline-block;padding-left: 5px;padding-right: 5px;
}
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block; max-width:100px; height:100px;
}

js

var regexEnum =
{
	intege:"^-?[1-9]\\d*$",					//整数
	intege1:"^[1-9]\\d*$",					//正整数
	intege2:"^-[1-9]\\d*$",					//负整数
	num:"^([+-]?)\\d*\\.?\\d+$",			//数字
	num1:"^[1-9]\\d*|0$",					//正数（正整数 + 0）
	num2:"^-[1-9]\\d*|0$",					//负数（负整数 + 0）
	decmal:"^([+-]?)\\d*\\.\\d+$",			//浮点数
	decmal1:"^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$",　　	//正浮点数
	decmal2:"^-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*)$",　 //负浮点数
	decmal3:"^-?([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*|0?.0+|0)$",　 //浮点数
	decmal4:"^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*|0?.0+|0$",　　 //非负浮点数（正浮点数 + 0）
	decmal5:"^(-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*))|0?.0+|0$",　　//非正浮点数（负浮点数 + 0）
	email:"^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$", //邮件
	color:"^[a-fA-F0-9]{6}$",				//颜色
	url:"^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$",	//url
	chinese:"^[\\u4E00-\\u9FA5\\uF900-\\uFA2D]+$",					//仅中文
	ascii:"^[\\x00-\\xFF]+$",				//仅ACSII字符
	zipcode:"^\\d{6}$",						//邮编
	mobile:"^(13|15|18|17)[0-9]{9}$",				//手机
	ip4:"^(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)$",	//ip地址
	notempty:"^\\S+$",						//非空
	picture:"(.*)\\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$",	//图片
	rar:"(.*)\\.(rar|zip|7zip|tgz)$",								//压缩文件
	date:"^\\d{4}(\\-|\\/|\.)\\d{1,2}\\1\\d{1,2}$",					//日期
	qq:"^[1-9]*[1-9][0-9]*$",				//QQ号码
	tel:"^(([0\\+]\\d{2,3}-)?(0\\d{2,3})-)?(\\d{7,8})(-(\\d{3,}))?$",	//电话号码的函数(包括验证国内区号,国际区号,分机号)
	username:"^\\w+$",						//用来用户注册。匹配由数字、26个英文字母或者下划线组成的字符串
	letter:"^[A-Za-z]+$",					//字母
	letter_u:"^[A-Z]+$",					//大写字母
	letter_l:"^[a-z]+$",					//小写字母
	idcard:"^[1-9]([0-9]{14}|[0-9]{17})$"	//身份证
}

var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}
function isCardID(str){
		var a = str.match(regexEnum.idcard);
		if (a == null) {return false;}
		return true;
}
function isempty(str){
		var a = str.match(regexEnum.notempty);
		if (a == null) {return false;}
		return true;
}
function isurl(str){
		var a = str.match(regexEnum.url);
		if (a == null) {return false;}
		return true;
}
function ischinese(str){
		var a = str.match(regexEnum.chinese);
		if (a == null) {return false;}
		return true;
}
function isqq(str){
		var a = str.match(regexEnum.qq);
		if (a == null) {return false;}
		return true;
}
function isint(str){
		var a = str.match(regexEnum.intege1);
		if (a == null) {return false;}
		return true;
}
function isdecmal1(str){
		var a = str.match(regexEnum.decmal1);
		if (a == null) {return false;}
		return true;
}
function isemail(str){
		var a = str.match(regexEnum.email);
		if (a == null) {return false;}
		return true;
}

//验证手机是否正确
function ismobile(str){
		var a = str.match(regexEnum.mobile);
		if (a == null) {return false;}
		return true;
}

//电话
function istel(str)
{
		var a = str.match(regexEnum.tel);
		if (a == null) {return false;}
		return true;
}
//短时间，形如 (13:04:06)
function isTime(str)
{
		var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
		if (a == null) {return false}
		if (a[1]>24 || a[3]>60 || a[4]>60)
		{
			return false;
		}
		return true;
}

//短日期，形如 (2003-12-05)
function isDate(str)
{
		var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
		if(r==null)return false;
		var d= new Date(r[1], r[3]-1, r[4]);
		return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
}

//长时间，形如 (2003-12-05 13:04:06)
function isDateTime(str)
{
		var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
		var r = str.match(reg);
		if(r==null) return false;
		var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
		return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
}
function checkainput(obj,ss){
		if(typeof(obj.val())!='undefined'){
				var b = false;
				switch(ss){
					case 'mobile':
						b = ismobile(obj.val());
					break;
					case 'empty':
						b = isempty(obj.val());
					break;
					case 'email':
						b = isemail(obj.val());
					break;
					case 'tel':
						b = istel(obj.val());
					break;
					case 'int':
						b = isint(obj.val());
					break;
					case 'qq':
						b = isqq(obj.val());
					break;
					case 'url':
						b = isurl(obj.val());
					break;
					case 'date':
						b = isDate(obj.val());
					break;
					case 'datetime':
						b = isDateTime(obj.val());
					break;
					case 'decimal':
						b = isdecmal1(obj.val());
					break;
					case 'time':
						b = isTime(obj.val());
					break;
				}
        if(!b){
            obj.next().next().show();return true;
        }else{
            obj.next().next().hide();return false;
        }
    }
}

猜你喜欢

转载自blog.csdn.net/u010261924/article/details/83417230
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022