分类归档 JavaScript

首先得有个表单:

<form action=”” method=”post”>
<table align=”center” width=”80%” border=”1″ cellpadding=”2″ cellspacing=”0″>
<tr><td>商家用户名</td><td><font color=”red”><?php echo $this->user[‘user’]?>(不可修改)</font></td>
<td>商家店名</td><td><font color=”red”><?php echo $this->user[‘name’]?>(不可修改)</font></td></tr>

<tr>
<td>商家地址</td><td><input type=”text” name=”add” value=”<?php echo $this->user[‘add’]?>” style=”width:100%” id=”qxz2″ onchange=”qxzadd()” maxlength=”20″/></td>
<td>商家邮箱</td><td><input type=”text” name=”mail” value=”<?php echo $this->user[‘mail’]?>” id=”qxz1″ onchange=”qxzemail()”style=”width:100%” maxlength=”30″/></td>
</tr>

<tr>
<td>商家手机</td><td><input type=”text” name=”phone” value=”<?php echo $this->user[‘phone’]?>” id=”qxz0″ onchange=”qxzphone()” style=”width:100%” maxlength=”11″/></td>
</td><td>商家热线</td><td><input type=”text” name=”tel” value=”<?php echo $this->user[‘tel’]?>” id=”qxz3″ onchange=”qxztel()” style=”width:100%” maxlength=”18″/></td>
</tr>

<tr>
<td>商家密码</td><td><input type=”text” name=”password” value=”” id=”qxz4″ onchange=”qxzpass()” style=”width:100%” maxlength=”16″ placeholder=”默认不修改.只允许英文和数字”/></td>
<td>修改资料</td><td><center><input type=”submit” value=”修改” onclick=”post_sys()” style=”width:100%”/></center></td>
</tr>
</table>
</form>

里面的PHP值不管了 就是作者MVC设置的

然后对每个环节进行JS控制:

function qxzphone() //实时检测手机号码
{
var x=document.getElementById(“qxz0”).value; //获取表单ID=PHONE的VALUE数值
if(isNaN(x)) //判断是否为数字
{
alert(“请输入11位数字的手机号”);
document.getElementById(“qxz0″).value=””; //重写为空
return false;
}
else
{
if(x.length!=11) //判断数值长度
{
alert(“您输入的手机号不足11位数”);
document.getElementById(“qxz0″).value=””; //重写为空
return false;
}
else
{
var mreg = /^(((13[0-9]{1})|159|153|158)+\d{8})$/; //正则表达式判断手机号的合法性
if(!mreg.test(x)) //用正则判断phone的值 ,如果是11位数但号码是乱写的
{
alert(“您输入的手机号有误”);
document.getElementById(“qxz0″).value=””; //重写为空
return false;
}
else
{
//alert(‘正确’);
return true;
}
}
}
}
function qxzemail() //邮箱格式判断
{
var mail=document.getElementById(“qxz1”).value;
var mreg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if(!mreg.test(mail))
{
alert(“邮箱格式不正确!”);
document.getElementById(“qxz1″).value=””; //重写为空
return false;
}
else
{
//alert(“OKOK”);
return true;
}
}

function qxzadd()
{
var add=document.getElementById(“qxz2”).value;
if(add.length<1)
{
alert(“商家地址为空!”);
document.getElementById(“qxz2″).value=””; //重写为空
return false;
}
else if(add.length<4)
{
alert(“地址长度小于4”);
document.getElementById(“qxz2″).value=””; //重写为空
return false;
}
else
{
return true;
}
}

function qxztel()
{
var tel=document.getElementById(“qxz3”).value;
var mreg=/^((0\d{2,3})-)(\d{7,8})(-(\d{2,3,4}))?$/;
//正则表达式,区号0+(2-3位)-号码(7-8位)-分机(3-4位)
var mreg1=/^((0\d{2,3})-)(\d{7,8})?$/; //无分机号码判断
if(tel.length==null||tel.length==undefined||tel.length<1) //如果为空,表示没有固话,直接返回真结束
{
//alert(“商家固定电话为空”);
return true;
}
else if(!mreg1.test(tel)) //如果判断无分机号码不正确
{
if(!mreg.test(tel)) //如果有分机号码但格式不正确
{
alert(“号码不正确!”);
document.getElementById(“qxz3″).value=””; //重写为空return false;
}
else
{
//alert(“号码正确,并且是带有分机号码的!”);
return true;
}
}
else
{
return true;
}
}

function qxzpass()
{
var pass=document.getElementById(“qxz4″).value;
var mage = RegExp(/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\’)(\”)(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);
//密码禁止非法字符判断
var zhcn=/.*[\u4e00-\u9fa5]+.*$/;//判断是否包含有中文
if(pass.length==null||pass.length==undefined||pass.length<1)
{
return true; //密码为空
}
else if(pass.length<8||pass.length>16)
{
alert(“密码必须大于8小于16”);
document.getElementById(“qxz4″).value=””; //重写为空
return false;
}
else
{
if(mage.test(pass))
{
alert(“包含特殊字符,密码只能为数字/英文 \n 取消修改密码”);
document.getElementById(“qxz4″).value=””; //重写为空
return false;
}
else if(zhcn.test(pass))
{
alert(“包含中文字符,密码只能为数字/英文 \n 取消修改密码”);
document.getElementById(“qxz4″).value=””; //重写为空
return false;
}
else
{
return true;
}

}
}

function post_sys() //提交数据按钮
{
if(qxzphone()==true&&qxzadd()==true&&qxzemail()==true&&qxztel()==true&&qxzpass()==true) //如果5个参数的判断结果都为真
{
var qxz=new Array();//定义数组
for(i=0;i<5;i++)
{
qxz[i]=document.getElementById(“qxz”+i).value; //循环获取用户输入的数据到数组
}
//在这里循环获取的数据会用在变量str中
/*
for (i=0;i<qxz.length;i++) //测试循环输出数据
{
document.write(qxz[i] + “<br />”);
}
*/
//开始请求AJAX发送数据包!
var url=”/shangjia/index.php?controller=user&action=userform”; //请求的URL接收方法为user控制器的userform方法
var str=”phone=”+qxz[0]+”&email=”+qxz[1]+”&add=”+qxz[2]+”&tel=”+qxz[3]+”&pass=”+qxz[4]; //创建POST数据的字符串连接
var ajax=false;
//开始初始化XMLHttpRequest对象开始
if(window.XMLHttpRequest) { //Mozilla 浏览器
ajax = new XMLHttpRequest();
if (ajax.overrideMimeType) {//设置MiME类别
ajax.overrideMimeType(“text/xml”);
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
ajax = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
ajax = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {}
}
}
if (!ajax) { // 异常，创建对象实例失败
window.alert(“不能创建XMLHttpRequest对象实例.”);
return false;
}
//对象创建结束
//正式开始数据请求!!
ajax.open(“POST”, url, true); //打开POST请求
ajax.setRequestHeader(“cache-control”,”no-cache”); //禁止缓存
ajax.setRequestHeader(“contentType”,”text/html;charset=uft-8″) //指定发送的编码
ajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”); //POST请求头
ajax.send(str); //开始发送POST数据
ajax.onreadystatechange = function()
{
//如果执行状态成功，那么就把返回信息写到指定的层里
if (ajax.readyState == 4 && ajax.status == 200) {
//msg.innerHTML = ajax.responseText;
//alert(“数据POST成功!”);
alert(ajax.responseText);
}
}
//数据请求完毕,数据在方法里执行.
}
else
{
alert(“请确认是否有数值填写错误!”);
}
}

请求的URL是MVC的

在控制器的方法里,还有多个方法进行判断

/*
* 判断邮件类型,需要一个参数为判断的变量值
*/
protected function email_type($email) #判断邮件格式
{
if(preg_match(“/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/”,$email))
{
return true; #返回真
}
else
{
return false; #返回假
}
}

/*
* 判断手机号码类型,参数为判断的手机号码
*/
protected function phone_type($phone)
{
if(preg_match(“/^(((13[0-9]{1})|159|153|158)+\d{8})$/”,$phone))
{
return true;
}
else
{
return false;
}
}

/*
* 判断电话号码格式
*/
protected function tel_type($tel)
{
if (!preg_match(“/^((0\d{2,3})-)(\d{7,8})?$/”,$tel)) //如果没有分机号码也不正确
{
if(!preg_match(“/^((0\d{2,3})-)(\d{7,8})(-(\d{2,3,4}))?$/”, $tel)) //如果有分机号码还是不正确
{
return false;
}
else
{ //有分机号码的.号码正确
return true;
}
return false;
}
else
{
return true;
}
}

/*
* 商家地址字符长度判断
* 第一个参数为商家地址,第二个为最少字数,默认为4个
*/
protected function add_type($add,$num=4)
{
$o=mb_strlen($add,’UTF8′); //获取商家长度
if ($o<$num)
{
return false;
}
else
{
return true;
}
}

protected function pass_type($pass,$num=8)
{
if(preg_match(“/[\’.,:;*?~`!@#$%^&+=)(<>{}]|\]|\[|\/|\\\|\”|\|/”,$pass)) //判断密码里是否有包含特殊字符
{
return false;
}
else if(preg_match(“/[\x7f-\xff]/”, $pass))
{
return false;
}
else
{
return true;
}
}

这样在接收的页面,就可以进行方法判断了,只要一个不符合要求,就不写入数据库

至于密码这一块,符号的定义可以自由截取部分,比如逗号是可以使用的等等.

使用JS/PHP双重判断的好处就是,别人恶意提交了AJAX请求,一样会面临被攻击的危险.