p2p.hongyunct.com: 红云创投P2P系统

#p2p.hongyunct.com 开发文档

二、页面模板相关变量的命名空间

1、ajax提交路径

jQuery方法： meta.ajax
ThinkPHP模板变量：{$meta.ajax}

2、文件上传提交路径

jQuery方法： meta.upload
ThinkPHP模板变量：{$meta.upload}

3、图片验证码验证路径

jQuery方法： meta.verifyImg
ThinkPHP模板变量：{$meta.verifyImg}

4、短信验证码验证路径

jQuery方法： meta.verifySms
ThinkPHP模板变量：{$meta.verifySms}

5、当前页面的相关名称和路径

当前分组的名称： {$page_name.group}，当前分组首页的路径：{$page_name.group_url};
当前模块的名称： {$page_name.module}，当前模块首页的路径：{$page_name.module_url};
当前方法的名称： {$page_name.action}，当前页面的路径：{$page_name.action_url};

6、模板页面常量定义

__PUBLIC__ => "/Public"
__JAVASCRIPT__ => "/Public/JavaScript"
__IMAGES__ => "/Public/Images"
__CUSTOM__ => "/Public/Custom"
__SELF__ => "当前分组模块方法的URL路径，不包含域名"
__APPURL__ => "当前项目"包含域名的网站URL路径“

**Tip：**前端系统已经自动加载了LazyLoad（异步加载）、cookie（js处理cookie）、mathRand（随机数生成）、coffee（绑定动作和回调函数）、timeCount（倒计时方法），不用再次加载这类方法。

	/* 异步加载css、js文件 */
	LazyLoad.css('/Public/Share/Weixin/WeixinApi.css');
	LazyLoad.js('/Public/Share/Weixin/WeixinApi.js', function(){
		alert('success');
		......	//异步加载成功后再做点什么
	}
	/*jQuery Cookie 使用方法 */
	$.cookie('the_cookie'); // 获得cookie
	$.cookie('the_cookie', 'the_value'); // 设置cookie
	$.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
	$.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'sosuo8.com', secure: true });
	$.cookie('the_cookie', '', { expires: -1 }); // 删除
	$.cookie('the_cookie', null); // 删除 cookie 
	/*timeCount倒计时函数 */
	<div endtime="到期时间截、标准时间格式字符串、年, 月, 日, 时, 分, 秒, 毫秒" endstr="已到期" id="remain"></div>
	timeCount('#remain');
	/*jQuery的事件绑定 */
	$('.action-box').coffee({
  		click: {
    		'#btn-add': function(){
      			//do something
    		},
    		'#btn-delete': function(){
      			//do something
    		}
  		},
  		mouseenter: {
    		'#btn-sort': function(){
      			//do something
    		}
  		}
	});

三、前端JS表单验证的方法

1、增加所在模块配置文件下loadfile.php文件的该方法所需加载的CSS、JS文件，比如给Member/register的注册表单增加JS表单验证，需要修改`LIB_ROOT/Conf/Member/loadfile.php`文件，内容新增：

return array(
	'member_register.js' => array(
		'Module/Form/validate/jquery.validate.min.js',
		'Module/Form/validate/jquery-methods.js',
		'Module/Dialog/messenger/messenger.min.js',
   	),
   	'member_register.css' => array(
		'Module/Dialog/messenger/messenger.css',
	),
);

2、修改页面模板文件，`LIB_ROOT/Tpl/Home/template/hyct/Member/register.html`，给`<form>`标签增加class`class="Validator"` ，如果采用ajax提交，则修改`<form method="ajax">`标签，不用定义Action；如果采用post提交，则需要修改成`<form method="post" action=“SELF”>`，需要设定Action。下面是一个完整的POST方式HTML表单验证：

<form method="post" action=“__SELF__” name="theForm" class="Validator">
	......
	<input type="submit" value="提交" />
</form>

3、自定义验证规则和提示

1. HTML方法
2. JS方法，给`<form>`标签增加`data-config="validator"`后，定义validator变量或外部引用一个已定义validator的JS变量的js文件，下面是一个自定义验证规则的例子：

```
var validator = {
	rules: {
		username: { required: true, byteRangeLength: [4,12]},
		realname: { required: true, chinese: true },
		password: { required: true, password: true},
		repasswd: { required: true, equalTo: "[name=password]" },
		email: { required: true, email: true},
		age:{required: true, range: [17,75]},
		idcard: {required: true, isIdCardNo: true},
		mobile: {required: true, isMobile: true},
		vdcode: { required:true, remote:{ url: meta.verifyImg, type: "post"} }，
		message: {required: true, minlength: 10, maxlength:10000},
		catname: { required: true}
	},
	messages:{
		username: { required: “用户名必须填写！”, byteRangeLength: "用户名需要{0}-{1}个字符(汉字算2个字符)"},
		realname: { required: “真实姓名必须填写！”, chinese: "真实姓名必须使用中文！"},
		password: { required: “登录密码必须填写！”, password: “密码强度不够，请设置一个复杂密码“},
		repasswd: { required: “重复密码必须填写！”, equalTo: “重复密码与新设定的密码不一致！”},
		email: { required: “请输入电子邮箱地址”, email: “请输入正确格式的电子邮件”},
		age: {required: “年龄必须填写或选择！”, range: “年龄必须在17岁至75岁范围之间！”},
		idcard: { required: “证件号码必须填写！”, isIdCardNo: “证件号码的格式有误！”},
		mobile: { required: “联系手机必须填写！”, isMobile: “手机号码格式有误！”},
		vdcode: { required: “验证码必须填写！”, remote: “验证码验证错误！” },
		message: {required: “评论信息必须填写！”, minlength: “评论信息不能少于10个字符”, maxlength: “评论信息不能多于10000个字符！”},
		catname: “分类栏目名称必须填写！”
	}
}
```

######4、忽略某个项目不使用默认规则验证的方法：给该项目增加class=“ignore”，例如：

  <input id="email" name="email" class=“ignore” />

######5、默认校验规则 1. required:true 必输字段 2. remote:"check.php" 使用ajax方法调用check.php验证输入值 3. email:true 必须输入正确格式的电子邮件 4. url:true 必须输入正确格式的网址 5. date:true 必须输入正确格式的日期日期校验ie6出错，慎用 6. dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 7. number:true 必须输入合法的数字(负数，小数) 8. digits:true 必须输入整数 9. creditcard: true 必须输入合法的信用卡号 10. equalTo:"#field" 输入值必须和#field相同 11. accept: 输入拥有合法后缀名的字符串（上传文件的后缀） 12. maxlength:5 输入长度最多是5的字符串(汉字算一个字符) 13. minlength:10 输入长度最小是10的字符串(汉字算一个字符) 14. rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) 15. range:[5,10] 输入值必须介于 5 和 10 之间 16. max:5 输入值不能大于5 17. min:10 输入值不能小于10 18. chinese:true 请输入正确的中文 19. password:true 密码由6-16位数字、字母、特殊字符组合 20. isIdCardNo:true 请正确输入您的身份证号码 21. passport:true 请正确输入您的护照编号 22. isMobile:true 请正确填写您的手机号码 23. isTel:true 请正确填写您的电话号码 24. isZipCode:true 请正确填写您的邮政编码

######radio和checkbox、select的验证

**Tip:**radio的required表示必须选中一个

 <input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
 <input  type="radio" id="gender_female" value="f" name="gender"/>

	
	> **Tip:**checkbox的required表示必须选中

	```
	<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表 示选中个数区间

```
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

    > **Tip:**select的required表示选中的value不能为空

	```
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
    <option value=""></option>
    <option value="1">Buga</option>
    <option value="2">Baga</option>
    <option value="3">Oi</option>
</select>

select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间

```
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
	<option value="b">Banana</option>
	<option value="a">Apple</option>
	<option value="p">Peach</option>
	<option value="t">Turtle</option>
</select>


	> **Tip:**异步验证方法：remote：URL，使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项

	```
remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

远程地址只能输出 "true" 或 "false"，不能有其它输出

测试

hunterzhi / p2p.hongyunct.com

二、页面模板相关变量的命名空间

1、ajax提交路径

2、文件上传提交路径

3、图片验证码验证路径

4、短信验证码验证路径

5、当前页面的相关名称和路径

6、模板页面常量定义

三、前端JS表单验证的方法

1、增加所在模块配置文件下loadfile.php文件的该方法所需加载的CSS、JS文件，比如给Member/register的注册表单增加JS表单验证，需要修改`LIB_ROOT/Conf/Member/loadfile.php`文件，内容新增：

3、自定义验证规则和提示

简介

发行版

贡献者

近期动态

hunterzhi / p2p.hongyunct.com .gitee-modal { width: 500px !important; }

二、页面模板相关变量的命名空间

1、ajax提交路径

2、文件上传提交路径

3、图片验证码验证路径

4、短信验证码验证路径

5、当前页面的相关名称和路径

6、模板页面常量定义

三、前端JS表单验证的方法

1、 增加所在模块配置文件下loadfile.php文件的该方法所需加载的CSS、JS文件，比如给Member/register的注册表单增加JS表单验证，需要修改LIB_ROOT/Conf/Member/loadfile.php文件，内容新增：

3、 自定义验证规则和提示

简介

发行版

贡献者

近期动态

搜索帮助

hunterzhi / p2p.hongyunct.com

1、增加所在模块配置文件下loadfile.php文件的该方法所需加载的CSS、JS文件，比如给Member/register的注册表单增加JS表单验证，需要修改`LIB_ROOT/Conf/Member/loadfile.php`文件，内容新增：

3、自定义验证规则和提示