<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <body> <form id="form1" action="" method="get"> <input name="text1" type="text" value="" placeholder="name"> <input type="password" name="pwd" placeholder="密码"> <input name="text3" value="submit" type="submit" onclick="subimtonclick()"> </form> <script language="JavaScript"> function subimtonclick(){ var form1=document.getElementById('form1'); if(form1.text1.value==""){ alert("用户名不能为空"); form1.text1.focus(); return; } if(form1.text1.value.length<6 || form1.text1.value.length>10){ alert("用户名不能少于六个字符,不能超过十个字符"); form1.text1.focus(); return; } if(form1.pwd.value==""){ alert("密码不能为空"); form1.pwd.focus(); return; } if(form1.pwd.value.length<6 || form1.pwd.value.length>10){ alert("密码不能少于六个字符,不能超过十个字符"); form1.pwd.focus(); return; } var str="用户名:"+form1.text1.value+"<br>"+ "密码:"+form1.pwd.value+"<br>"; document.writeln(str); } </script> </body> </html>
var getCheckObject = function() { var tipP = tip = document.createElement("p"); tip.appendChild(document.createTextNode("密码错误")); var tipU = tip = document.createElement("p"); tip.appendChild(document.createTextNode("用户名错误")); function addErrorTip(node, type) { node.className +=' ' + 'error' +' '; if(type =="username") { node.parentNode.appendChild(tipU); } else if (type == "password") { node.parentNode.appendChild(tipP); } } function removeErrorTip(node, type) { node.className = ""; if(type ==="username") { node.parentNode.removeChild(tipU); } else if (type === "password") { node.parentNode.removeChild(tipP); } } function isValidName(name) { return false; } function isValidPassword(password) { var lenIsEnough = password.length > 6; //密码长度大于6 var hasDigital = /{d}+/.test(password); //密码包含数字 var hasCharater = /{w}+/.test(password); //密码包含其它字符 return lenIsEnough && hasDigital && hasCharater; } return { addErrorTip: addErrorTip, removeErrorTip: removeErrorTip, isValidName: isValidName, isValidPassword: isValidPassword }; }; var checkObj = getCheckObject(); var form = document.forms['login-form']; var username = form['username'];//--name是关键字 var password = form['password']; form.addEventListener('submit', function(event){ if(!checkObj.isValidName(username.value)) { checkObj.addErrorTip(username,'username'); event.preventDefault(); } if(!checkObj.isValidPassword(password.value)) { checkObj.addErrorTip(password,'password'); event.preventDefault(); } }, false); form.addEventListener('reset',function(event){ checkObj.removeErrorTip(username,'username'); checkObj.removeErrorTip(password,'password'); },false); username.addEventListener('blur', function(event) { if (!checkObj.isValidName(username.value)) { checkObj.addErrorTip(username, 'username'); } }, false) username.addEventListener('focus', function(event) { checkObj.removeErrorTip(username, 'username'); }, false); password.addEventListener('blur', function(event) { if (!checkObj.isValidPassword(password.value)) { checkObj.addErrorTip(password, 'password'); } }, false) password.addEventListener('focus', function(event) { checkObj.removeErrorTip(password, 'password'); }, false);
<!DOCTYPE html> <html> <body> <form action="#" method="post" onsubmit="check()" > 请输入你的登录名: <input type="text" placeholder="邮箱/用户名/手机号" id="name"/> <br/> 密码: <input type="password" placeholder="6-10位字符/数字" name="password"/> <br/> <input type="submit" value="提交"/> </form> <script type="text/javascript"> function check(){ var loadName=document.getElementById('name').value; var word=document.getElementById('password').value; if(loadName==''){ alert('please input the valid name'); return false; } else if(word==''||(word.length<6||word.length>10)){ alert('the password is invalid'); return false; }else{ return true; } } </script> </body> </html>
//验证是不是空?还验证是否存在用户名?? function login(){ if(checkIsEmpty($('#username').text())=== true ){ if(checkIsEmpty($('#password').text()) === true){ // alert("不和后台对接的话,显示登陆成功")! var query = { username : "", password : "" } query.username = $('#username').text(); query.password = $('#password').text(); $.ajax({ url: "接口", type: 'POST', contentType: 'application/json; charset=utf-8', data: JSON.stringify(query), dataType: 'json', success:function(data){ if(data.success == true){ alert("登陆成功"); } else { alert(data.message);//后台返回一个错误 } } }) } } } function checkIsEmpty(item){ if(item === "" && item === null){ alert("不能为空") ; return false; }else{ return true; } }
<form name="form1" onsubmit="javascript:return loginSubmit()"> <input type="text" name="user" placeholder="请输入用户名">
</form>
<script>
function loginSubmit(){
var user = document.form1.user
if(user.value == ''){
alert('请输入用户名')
user.focus()
return false
}
if(user.value.length < 6 || user.value.length > 10){
alert('用户名程度在6-10之间,请重新输入')
user.select()
user.focus()
return false
}
}
</script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>用javascript实现用户登录验证的代码</title> <script> function checkname(){ var div = document.getElementById("div1"); div.innerHTML = ""; var name1 = document.form1.text1.value; if (name1 == "") { div.innerHTML = "姓名不能为空!"; document.form1.text1.focus(); return false; } if (name1.length < 4 || name1.length > 16) { div.innerHTML = "姓名输入的长度4-16个字符!"; document.form1.text1.select(); return false; } var charname1 = name1.toLowerCase(); for (var i = 0; i < name1.length; i++) { var charname = charname1.charAt(i); if (!(charname >= 0 && charname <= 9) && (!(charname >= 'a' && charname <= 'z')) && (charname != '_')) { div.innerHTML = "姓名包含非法字母,只能包含字母,数字,和下划线"; document.form1.text1.select(); return false; } } return true; } function checkpassword(){ var div = document.getElementById("div2"); div.innerHTML = ""; var password = document.form1.text2.value; if (password == "") { div.innerHTML = "密码不位空!"; document.form1.text2.focus(); return false; } if (password.length < 4 || password.length > 12) { div.innerHTML = "密码长度4-12位"; document.form1.text2.select(); return false; } return true; } function checkrepassword(){ var div = document.getElementById("div3"); div.innerHTML = ""; var password = document.form1.text2.value; var repass = document.form1.text3.value; if (repass == "") { div.innerHTML = "密码不位空!"; document.form1.text3.focus(); return false; } if (password != repass) { div.innerHTML = "输入密码和确认密码长度不一致"; document.form1.text3.select(); return false; } return true; } function checkEmail(){ var div = document.getElementById("div4"); div.innerHTML = ""; var email = document.form1.text5.value; var sw = email.indexOf("@", 0); var sw1 = email.indexOf(".", 0); var tt = sw1 - sw; if (email.length == 0) { div.innerHTML = "电子邮件不能位空"; document.form1.text5.focus(); return false; } if (email.indexOf("@", 0) == -1) { div.innerHTML = "电子邮件格式不正确,必须包含@符号!"; document.form1.text5.select(); return false; } if (email.indexOf(".", 0) == -1) { div.innerHTML = "电子邮件格式不正确,必须包含.符号!"; document.form1.text5.select(); return false; } if (tt == 1) { div.innerHTML = "邮件格式不对。@和.不可以挨着!"; document.form1.text5.select(); return false; } if (sw > sw1) { div.innerHTML = "电子邮件格式不正确,@符号必须在.之前"; document.form1.text5.select(); return false; } else { return true; } return ture; } function check(){ if (checkname() && checkpassword() && checkrepassword() && checkEmail()) { return true; } else { return false; } } </script> </head> <body> <form name="form1" method="post" action="http://www.taobao.com" onsubmit="return check()"> <table> <tr> <td> 用户名: </td> <td> <input id="text1" type="text" name="text1" onblur="check()"> <div id="div1" style="display:inline"> </div> </td> </tr> <tr> <td> 密码: </td> <td> <input id="text2" type="password" name="text2" onblur="check()"> <div id="div2" style="display:inline"> </div> </td> </tr> <tr> <td> 确认密码: </td> <td> <input id="text3" type="password" name="text3" onblur="check()"> <div id="div3" style="display:inline"> </div> </td> </tr> <tr> <td> 电子邮件地址: </td> <td> <input id="text4" type="text" name="text4" onblur="check()"> <div id="div4" style="display:inline"> </div> </td> </tr> <tr align="center"> <td align="center"> <input type="submit" value="提交" name="tect6"> <input type="reset" value="重置" name="text7"> </td> </tr> </table> </form> </body> </html>
var code="" ; //在全局 定义验证码function createCode(){code = "";var codeLength = 6;//验证码的长度var checkCode = document.getElementById("checkCode");checkCode.value = "";var selectChar = newArray(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');for(var i=0;i<codeLength;i++) {var charIndex = Math.floor(Math.random()*32);code +=selectChar[charIndex];}if(code.length != codeLength){createCode();}document.getElementById("checkCode").innerHTML = code;}function validate () {var inputCode = document.getElementById("checkNum").value.toUpperCase();if(inputCode.length <=0) {alert("请输入验证码!");return false;}else if(inputCode != code ){alert("验证码输入错误!");createCode();return false;}else {alert("验证码通过!");return true;}}
<script language="JavaScript"> function subimtonclick(){ if(form1.text1.value==""){ alert("用户名不能为空"); form1.text1.focus(); return; } if(form1.text1.value.length<6 || form1.text1.value.length>10){ alert("用户名不能少于六个字符,不能超过十个字符"); form1.text1.focus(); return; } if(form1.text2.value==""){ alert("密码不能为空"); form1.text2.focus(); return; } if(form1.text2.value.length<6 || form1.text2.value.length>10){ alert("密码不能少于六个字符,不能超过十个字符"); form1.text2.focus(); return; } if(form1.text3.value.length>4){ alert("用户小于四个字符"); form1.text3.focus(); return; } //性别 var sex; if(form1.radiobutton.item(1).checked==true){ sex="女"; } if(form1.radiobutton.item(0).checked==true){ sex="男"; } //兴趣 var selectstr=""; for(i=0;i<form1.select1.options.length;i++){ if(form1.select1.options.item(i).selected==true){ selectstr+=form1.select1.options.item(i).text+" "; } } //城市 var citystr=""; citystr=form1.select2.options.item(form1.select2.selectedIndex).text; str="用户名:"+form1.text1.value+"<br>"+ "密码:"+form1.text2.value+"<br>"+ "性别:"+sex+"<br>" //document.write(); //document.write(""); document.writeln(selectstr); } </script>
function login(callback){ var xhr = null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ if(xhr.responseText){ callback(true); }else{ callback(false); } }else{ callback(false); } } } xhr.open('POST','server/login',true); xhr.send(); }