index.htm
--------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<script type="text/javascript" src="js/jq/jquery.js"></script>
<script type="text/javascript" src="js/jq/external/vilidate/jquery.validate.js"></script>
<script src="js/area_data.js"></script>
<script src="js/form_my.js"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<body>
<form id="form" name="form" method="GET" action="" >
<table>
<tr>
<td>
客户姓名
</td>
<td>
<input name=name id=name />
</td>
</tr>
<tr>
<td>
身份证号
</td>
<td>
<input name=cid id=cid style="ime-mode:disabled;" />
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" value="0" name=sex id=sex_f />女
<input type="radio" value="1" name=sex id=sex_m />男
</td>
</tr>
<tr>
<td>
车牌号码
</td>
<td>
<input name=carid id=carid/>
</td>
</tr>
<tr>
<td>
手机号码
</td>
<td>
<input name=phone id=phone style="ime-mode:disabled;" maxlength = 15 />
</td>
</tr>
<tr>
<td>
联系地址
</td>
<td>
<input name=addr id=addr />
</td>
</tr>
<tr>
<td>
所在省市(可选)
</td>
<td>
<select name=sheng id=sheng ><option value=0>请选择省</option></select>
<select name=sheng_1 id=sheng_1 style="display:none;" ></select>
</td>
</tr>
<tr>
<td>
电子邮件(可选)
</td>
<td>
<input name=email id=email />
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input name=verify id=verify />
<input type=button οnclick="send_phone();" value="获取验证码"/>
</td>
</tr>
<tr>
<td >
<input type=checkbox name=agree id=agree />
</td>
<td>
我已阅读并同间太保用户的注册保密协议,<a href="javascript:void(0);" οnclick="$('#agree_div').css('display','block');">点击并阅读</a>.
<div id="agree_div">
<a href="javascript:void(0);" οnclick="$('#agree_div').css('display', 'none');">关闭</a><br />
协议内容如下:
</div>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit value="完成" />
</td>
</tr>
</table>
</form>
</body>
</html>----------
chk_user.php
--------
<?php
header('Content-Type:text/html; charset=gb2312');//一定要,返回编码,有些浏览器有时默认是utf8,返回中文时会乱码
$name = urldecode($_POST['name']); //一定要,如下原因
$name = iconv('UTF-8', 'gb2312',$name);//这二行一定要,因为js发送过来的变成了utf-8编码,要解码后再转gb2312
if ( $name == '中国' ){//用户输入的用静态方式提交过来的用户名,进行检测,是否存在
echo 'false';//存在了,请返回false, 用户名那会提示,用户名存在了
}else{
echo 'true'; //不存在,返回true
}
---------
chk_verify.php
---
<?php
header('Content-Type:text/html; charset=gb2312');//必须
if ($_POST['verify'] == 'qidizi'){//用户输入手机中收到的验证码,进行检测,是否输入正确
echo 'true';//正确,请返回true,可以进行下步操作
}else{
echo 'false';//不正确,请返回false,不能进行下步,提示,验证码出错
}---
send_verify.php
-
<?php
header('Content-Type:text/html; charset=gb2312');//必要
echo '已经发送';//只是返回一个提示信息,说明验证码已经发到手机了,请注意查收,并输入,使用js 的alert提示方式, 因为只是验证手机号拥有性,暂不必要限制验证码存活期,
-------
js/area_code.js
----
//需要维护本js列表
var area_list = {};
area_list['中国'] = [ //这行 '中国' 这二个字不能改
//可修改开始位置
// 格式: '省名',
'广东省',
'北京市',
'湖南省',
'浙江省',
'新江',
'最后一个省,不要加(,)号'
//可修改结束位置,注意这最后一行不能加,号
];
//可修改开始位置,这下面是设置省下的市或是县,像北京这样的,如果下面没有市,如果在php中只想使用 sheng 这个字段,你可以为北京市下面加上北京市,用户就可以在二级中选择北京市了,否则你要判断是否二级是空,然后使用一级的值
//以下的例子只是增加二个省的二级,可以根据上面的来增加
//一个省的二级格式
/*
//格式开始
area_list['省名'] = [//这行的省名,一定要是上面存在的
//二级开始位置
//一行一个
//格式 '市名',
'市名一',
'市名二',
'东广',
'湛江',
'最后一个市,不要加,号'
//注意这最后一行不能加,号
//可修改结束位置,
];
//格式结束
*/
area_list['广东省'] = [ //市的列表,格式: '市名', 一行,最后那行不要加 ,
'广州',
'深圳',
'东广',
'湛江',
'xxx'
];
area_list['北京市'] = [ //市的列表,格式: '市名', 一行,最后那行不要加 ,
'北京市'
];
----
form_my.js
-
$(document).ready(
function (){
$("#form").validate({//这行的 form 是html中 <form name='form' id='form' 中的
rules: {
name: {//名字的判断规则, 这行的 name 是名字<input name='name' 中的name,下面cid/sex/carid/phone/addr/sheng/email/verify/agree也是同样的;
required:true,//不能留空,cid中的也一样作用
minlength:2,//字数起码要2个,carid中也是一样作用
iscn:true,//是否中文
remote: {
url: 'chk_user.php', //服务端用户是否存在php验证程序,返回值见php中说明
data:{ name: function(){ return encodeURIComponent($("#name").val()); } }, //这行,第一个name是发送到php的$_POST['name'],第二个是<input name='name'
type: "POST", //提交方式
contentType: "application/x-www-form-urlencoded; charset=UTF-8"
}
},
cid: {
required: true,
isIdCardNo: true
},
sex:{
required: true
},
carid:{
required: true,
minlength:6,
iscarid:true
},
phone:{
required: true,
minlength:11,
isMobile:true
},
addr:{
required: true,
minlength:20
},
sheng:{
required: false
},
sheng_1:{
required: false,
sheng_1_select: true
},
email:{
email:true
},
verify:{
required:true,
minlength:6,
isverify:true,
remote: {
url: "chk_verify.php", //服务端验证码输入是否正确php验证程序,返回格式说明见php中
type: "post", //提交方式
data: { verify: function(){return $("#verify").val();} } //如需要修改php中$_post['veriry']key,见上面name说明
}
},
agree:{
required:true
}
},
messages:{
name:{//名字对应判断规则,不符合时说明,可修改说明文字
required:'客户名必填',
minlength:'字数必须大2个',
remote:'用户名存在'
},
cid: {
required: '请输入身份证号'
},
sex:{
required: '请选择性别'
},
carid:{
required: '车号必填',
minlength:'不少于6位'
},
phone:{
required: '手机号必填',
minlength:'不少于11位'
},
addr:{
required: '地址必填',
minlength:'不少于20位'
},
sheng:{
required: ' ' //省可选,所以,不是必填项,说明为空,
},
sheng_1:{
},
email:{
email:'邮件不正确'
},
verify:{
required:'验证码必须写',
minlength:'不少6位',
remote:'验证码错误'
},
agree:{
required:'你必须同意'
}
},
errorClass: "invalid_err",//出错样式 瞧 css/css.css 使用格式 .invalid_err{color:red;} ;下同
validClass: "invalid_ok", //正确样式
errorPlacement: function(error, element) {//使用换行方式,插入提示信息,因为默认时会在出错的对象后面插入,像 男 女 这样的选项,会直接在男后面插入,而非 女后面,
$('<br/>').appendTo(element.parent()); //因为插入的提示对象 label 是inline显示方式,需要加上<br />才能换行
error.appendTo(element.parent()); //在<input >的父对象的最后面插入提示对象 如 <td><input > <input > 在这里插入提示信息 </td>
}
}
);
show_sheng();//显示省列表
}
);
function send_phone(){//点击获取验证码,
if (!$("#form").validate().element( "#phone" )){//判断是否填写了手机
return alert('请输入手机号再发送.');
}
var less_min = 1;//允许隔多久才能发送一次手机验证码,单位分钟
if (!window.phone_verify || ( (window.phone_verify + (less_min * 60000)) <= new Date().getTime() ) ){
window.phone_verify = new Date().getTime();
var url = 'send_phone_verify.php?phone=' + $("#phone").val();//?phone=的phone用于php中的$_GET['phone'],带的是手机输入中的号码
$.ajax({
url:url,
type:"GET",
cache :false,
dataType:'html',
success:function (data){ alert(data); },
error:function (event, XMLHttpRequest, ajaxOptions, thrownError){ alert('发送验证码出错了:' + XMLHttpRequest);}
});
}else{
alert('必须要隔[' + less_min + ']分钟才能重新获取一次');
}
}
//中文
jQuery.validator.addMethod("iscn", function(value, element) {
var reg = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (reg.test(value));
}, "请输入中文(可修改本说明)");
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;
return this.optional(element) || (idCard.test(value));
}, "请输入正确的身份证号码!(可修改本说明)");
// 车号只能是汉字,数字,字母
jQuery.validator.addMethod("iscarid", function(value, element) {
var idCard = /^[\u4e00-\u9fa5]{1}[A-Z0-9]{6}$/;
return this.optional(element) || (idCard.test(value));
}, "请输入正确的车号,必须字母大写!(可修改本说明)");
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码!(可修改本说明)");
// 验证码格式,数字和字母
jQuery.validator.addMethod("isverify", function(value, element) {
var idCard = /^[\w\d]{6,}$/;
return this.optional(element) || (idCard.test(value));
}, "请正确填写验证码(6位以上数字和字母)!(可修改本说明)");
// '二级地区必须选择' //二级须选,就算是像北京市,二级也要加 北京市,以可让二级有选项选择,判断办法是不是选择了第一个选择 '请选择二级',二级的列表维护请看js/area_data.js说明
jQuery.validator.addMethod("sheng_1_select", function(value, element) {
return (element.options.length ==0) || (element.selectedIndex > 0) ;
}, "二级地区须选择(可修改本说明)");
function show_sheng(){//载入省份
$("#sheng").change(//在<select name=sheng>的对象中载入省份
function (){
show_sheng_1.call(this);
}
);
var temp_list = area_list['中国'];//取area_code.js中的中国这个省份列表做为显示用
for (var i = 0; i < temp_list.length; i++){
$('<option value="' + temp_list[i] + '">' + temp_list[i] + '</option>').appendTo("#sheng")//添加下拉框的option
}
}
function show_sheng_1(){//载入二级
var obj = this;
$('#sheng_1').empty();
$('#sheng_1').css('display', '');
$('<option value="">请选择二级地区</option>').appendTo("#sheng_1")//添加第一个默认 下拉框的option,注意 value=""不能修改,检测使用它,是否选中了第一个
var list_h = area_list[ obj.options[obj.selectedIndex].value ];
if (!list_h) list_h = [];
for (var i = 0; i < list_h.length; i++){
$('<option value="' + list_h[i] + '">' + list_h[i] + '</option>').appendTo("#sheng_1")//添加下拉框的option
}
}
---css/css.css
--
body{
font-size:12px;
}
.invalid_err{
color:red;
}
.invalid_ok{
color:green;
}
#agree_div{
position: absolute;
top:255px;
left:10px;
display:none;
background:white;
border:1px solid black;
padding:10px;
}
