代码解析:
通过ajax获取url路径链接php接口做登录和注册获取到的数据传到数据库.
ajax利用四步:
//1.创建一个ajax对象;
//2.打开请求；
//判断用户传递的是get还是post请求:
//3.发送数据:
//4.获取响应数据
php自写
登录和注册利用jQuery.validation.js
具体代码如下，仅做参考，多多指教
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>登录&注册</title> <style> *:focus { outline: none; /*清除input获取焦点时的蓝框*/ } img { 30px; height: 30px; display: none; } </style> </head> <body>
//引入jquery-1.9.1.j或jquery-3.1.1.js版本 <script src="js/jquery-1.9.1.js"></script>
//引入jquery.validata.min.js或者jquery.validata.js <script src="js/jquery.validate.min.js"></script>
//这里的ajax是利用获取url路径链接php接口发送到数据库 <script src="ajax.js"></script> <script> $(function() { var oUser = $('#username'); var oPass = $('#password'); var oSpan = $('#span'); var oLgn = $('#lgn'); var oReg = $('#reg'); var oImg = $('#img'); $('#demoForm').validate({ //规则 rules: { username: { // 指的是input的name required: true, minlength: 6, maxlength: 9 }, password: { required: true, minlength: 6, maxlength: 9 } }, //提示信息 messages: { username: { required: '此项必填！', minlength: '用户名不少于6位', maxlength: '用户名不超过9位' }, password: { required: '此项必填！', minlength: '密码不少于6位', maxlength: '密码不超过9位' } },
ignore:'#password', //忽略某个元素不校验
//$('#check').click(function(){
// alert($('#demoForm').valid()?'ok':'no');
//})
submitHandler:function(){
alert('校验全部通过');
},//*
focusInvald:true,
focusCleanUp:true,
errorElement:'div', //改变错误信息的标签
errorClass:'wrong',//错误时字体会变红
validClass:'right',
highlight:function(element,errorClass){//给未通过验证的元素加效果
$(element).addClass(errorClass);
$(element).fadeOut().fadeIn();
},
invalidHandler:function(validator){
//console.log(validator.numberOfInvalids());
alert('no');
},
submitHandler: function() { oLgn.on('click', function() {
//user.php自写 myAjax('user.php', 'lgn', oUser.val(), oPass.val()); }); oReg.on('click', function() {
myAjax('user.php', 'add', oUser.val(), oPass.val()); }); function myAjax(url, act, userValue, passValue) { $.ajax({ url: url, data: { act: act, user: userValue, pass: passValue }, beforeSend: function() { oImg.css('display', 'block'); }, success: function(res) { var json = eval('(' + res + ')'); oSpan.html(json.msg); }, complete: function() { oImg.css('display', 'none'); } }); } } }); }); </script> <form id="demoForm"> <!--用户名--> <p> <label for="username">username :</label> <input type="text" name="username" id="username" /> </p> <!--密码--> <p> <label for="password">password :</label> <input type="text" name="password" id="password" /> <span id="span"></span> </p>
<!--日期-->
<p>
<label for="date">date :</label>
<input type="text" name="date" id="date"/>
</p>
<!--邮箱-->
<p>
<label for="email">email :</label>
<input type="text" name="email" id="email"/>
</p>
<!--邮编-->
<p>
<label for="PostCode">PostCode :</label>
<input type="text" name="PostCode" id="PostCode"/>
</p>
<!--提交按钮-->
<p>
<input type="submit" value="登录" id="lgn" />
<input type="submit" value="注册" id="reg" />
<img src="img/loading.jpg" id="img" />
</p>
</form>
</body>
</html>
更多细节待续...