ajax无刷新验证注册信息示例

Ajax没有刷新来验证注册信息示例。大致思路如下： 1。做好html页面(htmlcss)的注册工作。1.不需要表单表单，而是直接用div包装。2.需要四个标签来显示正确和错误的信息。3.不要提交按钮，只使用按钮。

如图所示：

2.让ajax成为一个函数，通过传递简单的参数与服务器交换数据。

1.在一篇关于如何通过ajax处理返回数据的文章中详细解释了这个ajax函数。2.ajax函数需要三个参数，url、jsonData和getMsg。这里的URL都是regProcess.php的，jsonData是要发送到服务器进行验证的数据，getMsg是获取返回数据的函数。3.重复第二步，验证四条信息

3.制作一个regProcess.php文件来处理注册信息

1.这是为了处理ajax发送的数据。注意发送方式是post，所以接收方式是POST。2.收到所有数据后，是要进行验证和判断的。最重要的是能否成功接收到数据，不能接收到错误的数据。这里需要注意的是，有些特殊字符在发送到服务器时会显示不正确，例如，''会显示为''空格，请自行搜索详细信息。因此，如果服务器在接收时发送了特殊字符，则需要对其进行编码才能正确使用。php使用urlencode函数进行url编码。

4.将所需的函数写入函数，将它们放入另一个myFunc.php文件中，然后将它们导入regProcess.php文件中直接使用。

1.验证用户名是否非法并已注册。2.验证密码是否非法以及密码的强度。3.验证密码输入是否一致。4.验证邮箱是否非法并已注册。5.将用户信息保存到数据库中，然后使用这些函数直接处理返回的错误代码。

5.返回处理过的数据，这里我以json字符串的形式返回，然后JS解析。

1.返回的数据应该拼接成json格式。json格式为： {name1:value1，name 2: value 2 }；但是我们想要返回的实际上是一个字符串，所以应该是像“{ name 1”:“value 1”、“name 2”:“value 2”} '这样的；2.返回前端后，使用JS的eval函数将其解析为一个json对象。例如， varjson=eval('(' oajax . responsetext ')')；3.在相应的输入后面显示经过验证的信息。4.点击注册，一次性提交所有数据。如果没有问题，保留注册用户信息，提示注册成功。

注册成功的效果如下图：所示

数据库还更新了刚刚登记的信息

注册失败的影响如下图：所示

以下是主要代码：

Html代码

Div id='reg '标签用户名：输入类型=' text ' ID=' username '/labellabel/Label br/br/Label password :输入类型=' passw ' ID=' passw '/Label br/br/标签确认密码： inputtype=' password ' ID=' repassw '/Label br/br/标签邮箱： inputtype=' text ' ID=' email '/Label br/br/按钮ID=' BTN '注册

# reg { width:400pxheight: 300px相对位置：margin:10px auto} #reg标签{ float:right相对位置：margin-top : 10px；font-size : 28px；} #reg标签输入{ width:250px高度： 40px；font-size : 24px；} # reg # btn { width:120px高度： 40px；绝对位置：right: 65px边距-top : 80px；} # reg span { width:200px绝对位置：right :-210 px；font-size : 24px；} # reg #用户{ top:20px} # reg # pass { top:75px} # reg # rep { top:130px} # reg # em { top:185px} .错误{ color:red} .ok { color:greenyellow}js代码

脚本src='http:/././Ajax。js '/脚本脚本窗口。onload=function(){//后台验证bgProcess()；//提交注册信息，返回注册成功与否$('btn ').onclick=function(){ var jsonData={ username : $(' username ').值passw : $(“passw”).值，repassw:$('repassw ').值，电子邮件：美元(“电子邮件”).值};Ajax(' regprocess。PHP '，jsonData，getInfo，' JSON ')；};函数getInfo(info) { var a=['username '，' passw '，' repassw '，' email ']；var b=['user '，' pass '，' rep '，' em ']；定义变量标志=真；for(var I=0；iinfo . lentigi){ if(info[I]).state==' false '){ flag=false；displayInfo(info[i]，b[i]，a[I])；//显示错误信息} }如果(标志)警报('恭喜你注册成功');} };//后台验证函数bgProcess() { //验证用户名$("用户名")。onb lur=function(){ var jsonData={ username : this。值}；Ajax(' regprocess。PHP '、jsonData、getUser、' JSON ')；};函数getUser(msg){ displayInfo(msg[0]，' User '，' username ')；} //验证密码$(“passw”).onkeyup=$(“passw”).onb lur=function(){ var jsonData={ passw : this。值}；Ajax(' regprocess。PHP '、jsonData、getPass、' JSON ')；};函数getPass(msg){ displayInfo(msg[1]，' Pass '，' passw ')；} //确认密码$(“repassw”).onb lur=function(){ var jsonData={ passw : $(' passw ').值，repass w :这个。值}；Ajax(' regprocess。PHP '、jsonData、getRepass、' JSON ')；};函数getRepass(msg){ displayInfo(msg[2]，' rep '，' repassw ')；} //验证邮箱$("电子邮件")。onb lur=function(){ var jsonData={ email : this。值}；Ajax(' regprocess。PHP '，jsonData，getEmail，' JSON ')；};函数getEmail(msg){ displayInfo(msg[3]，' em '，' email ')；} } //显示信息函数displayInfo(消息，id，名称){ $(id).类名=(msg。state=' true ')？ok': '错误；$(id).innerHTMl=msg[name]；}函数$(id){返回文档。getelementbyid(id)；} /scriptmyFunc.php代码：

？PHP/* * * @函数验证用户名* @ param $用户名用户名* @返回返回一个$res数组，里面包含了错误代码，1:用户名非法，1:没有输入用户名，1:用户名存在*/函数verifyUser($ username){ $ RES=array()；//匹配成功返回匹配次数，0表示没有匹配到，匹配字母、数字、下划线if(preg_match('/^\\w{6,16}$/',$username)=0)$ RES[]=1；else $ RES[]=0；如果(空($ username))$ RES[]=1；else $ RES[]=0；if(验证数据($username ')用户名')) //验证该用户名是否被注册了$ RES[]=1；else $ RES[]=0；返回$ res}/* * * @函数验证密码是否非法和密码强度* @param $passw密码* @返回$res密码强度*/函数验证passw($ passw){ $ reg 1='/^[0-9]{8,16}$/'；//纯数字$ reg 2='/^[a-za-z]{8,16}$/'；//纯字母$reg3='/^[a-zA-Z\ ]{8，16 } $/'；//纯字母$ reg 4='/^[0-9a-za-z]{8,16}$/'；//数字和字母组合$reg5='/^[0-9a-zA-Z\ ]{8，16 } $/'；//数字、' '和字母组合$ resif(空($ passw))$ RES=-1；else if(preg_match($reg1，$ passw))$ RES=1；else if(preg_match($reg2，$ passw))$ RES=1；else if(preg_match($reg3，$ passw))$ RES=2；else if(preg_match($reg4，$ passw))$ RES=2；else if(preg_match($reg5，$ passw))$ RES=3；else $ RES=0；//非法密码返回$ res}/* * * @函数验证邮箱是否非法和是否已经被注册使用* @ param $电子邮件邮箱* @返回$res错误代码*/函数验证电子邮件($ email){ $ reg='/^([\w-*\.*])[emailprotected](\w-？) (\.\w{2，})$/'；$ resif(空($ email))$ RES=-1；否则如果（验证数据($email，)邮箱))$ RES=1；else if(preg_match($reg，$ email))$ RES=2；else $ RES=0；//非法邮箱返回$ res}/* * * @函数验证数据是否已经存在* @ param $数据* @ param $查询* @返回数据存在返回1,否则返回0 */函数verifyData($data，$query){ //1 .连接数据库@ $ db=new MySQL(' localhost '，' root '，' root '，' user _ passd ')；if(MySQL _ connect _ errno())die('连接数据库失败');//2.验证数据是否存在$sql='从登录名中选择$query，其中$ query=' { $ data } $ RES=$ db-query($ SQL)；$ row=$ RES-fetch _ assoc()；//3.关闭数据库$ db-close()；返回为_null($row)？0:1;}/* * * @函数保存注册用户信息* @ param $数据要保存的数据，一个数组* @返回bool $res返回真实的表示信息保存成功，假的表示失败*/函数saveRegInfo($data){ //1 .连接数据库@ $ db=new MySQL(' localhost '，' root '，' root '，' user _ passd ')；if(MySQL _ connect _ errno())die('连接数据库失败');//2.插入数据$sql='插入登录值(“{$data[0]}”、“{$data[1]}”、“{ $ data[2]}”)”；$ RES=$ db-query($ SQL)；//3.关闭数据库$ db-close()；返回$ res}regProcess.php代码

？phpheader(' Content-type : text/html；charset=utf-8 ')；//禁用缓存，让数据在数据相同的前提下正常提交，而不是缓存数据头(' cache-control : no-cache ')；include(' my func . PHP ')；//包含我的函数库$ username=isset($ _ post[' username '])？$ _ POST[' username ']:“”；//获取用户名$passw=isset($_POST['passw'])？URL encode($ _ POST[' passw ']):“”；//获取密码$ repassw=isset($ _ post[' repassw '])？URL encode($ _ POST[' repassw ']):“”；//获取确认密码$email=isset($_POST['email'])？$ _ POST[' email ']:“”；//获取邮箱$ info='['；//存储返回页面的数据$ issuecceed=0；//判断注册是否成功。如果最终结果为4，则表示全部正确，注册成功。//1.验证用户名是否非法$ res1=verifyUser($ username)；If ($ res1 [1]) $ info。=' {'username' : '请输入用户名'，' state ' : ' false ' }Elseif ($ res1 [0]) $ info。=' {'username' : '用户名非法'，' state ' : ' false ' }Elseif ($ res1 [2]) $ info。=' {'username' :' username已经存在'，' state ' : ' false ' }Else{ $info。=' { ' username ' : ' username available '，' state ' : ' true ' }$ issuecceed；}$info。=',';//2.验证密码是否非法，强度是否为$ res2=verifyPassw($ passw)；If ($ res2==-1) $ info。=' {'passw' : '请输入密码'，' state ' : ' false ' }Elseif ($ res2==0) $ info。=' {'passw' : '密码非法'，' state ' : ' false ' }Else {if ($ res2==1) $ info。=' {'passw' : '密码强度较弱'，' state ' : ' true ' }Elseif ($ res2==2) $ info。=' {'passw' : '密码强度为中'，' state ' : ' true ' }Elseif ($ res2==3) $ info。=' {'passw' : '强密码'，' state ' : ' true ' }$ issuecceed；}$info。=',';//3.确认密码if(空($ repassw)) $ info。=' {'repassw' : '请先输入密码'，' state ' : ' false ' }Elseif ($ passw==$ repassw) {$ info。=' {'repassw' : '密码一致'，' state ' : ' true ' }$ issuecceed；}else $info。='{'repassw': '密码不一致'，' state ' : ' false ' }$信息。=',';//4.验证邮箱$ res3=verify email($ email)；If ($ RES 3==-1) $ info。=' {'email' : '请输入邮箱'，' state ' : ' false ' }Elseif ($ RES 3==0) $ info。=' {'email' : '邮箱非法'，' state ' : ' false ' }Elseif ($ res3==1) $ info。=' {'email' : '此邮箱已注册'，' state ' : ' false ' }Elseif ($ res3==2) {$ info。=' {'email' : '此邮箱可用'，' state ' : ' true ' }$ issuecceed；}//保存用户注册信息if($ issuceed==4)保存reginfo (array ($ username，$ passw，$ email))；回声$信息。=']';虽然这个例子很简单，但它可以让初学者大致了解前端如何向后端传输数据，后端如何向前端返回数据。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。