网站建设php的心得和体会,交易网站开发合同范本,活动推广,炫酷的网站设计自我消耗#xff0c;敏感是我#xff0c; 明媚是我#xff0c; 我横跳在不同的情绪中 —— 24.8.31 一、登录页及校验
1.校验账号格式 // 校验账号格式function checkUsername(){// 定义正则表达式表示字符串规则var usernameReg /^[a-zA-Z0-9]{5,10}$/;// 获取用户名输入… 自我消耗敏感是我 明媚是我 我横跳在不同的情绪中 —— 24.8.31 一、登录页及校验
1.校验账号格式 // 校验账号格式function checkUsername(){// 定义正则表达式表示字符串规则var usernameReg /^[a-zA-Z0-9]{5,10}$/;// 获取用户名输入框的值var usernameInput document.getElementById(usernameInput);var username usernameInput.value;// 获取提示信息元素var usernameMsg document.getElementById(usernameMsg);// 判断用户名是否符合规则if(usernameReg.test(username)){// 符合规则返回true在页面上提示OKusernameMsg.innerText OK;return true;}else{// 不符合规则显示提示信息usernameMsg.innerText 用户名必须为5-10位字母、数字或下划线;// 格式有误时返回false阻止表单提交return false;}}
2.校验密码格式 // 校验密码是否符合规则的函数function checkUserPwd(){// 定义正则表达式表示字符串规则var userPwdReg /^[0-9]{6}$/;// 获取密码输入框的值var userPwdInput document.getElementById(userPwdInput);var userPwd userPwdInput.value;// 获得格式提示的框var userPwdMsg document.getElementById(userPwdMsg);// 判断密码是否符合规则if(userPwdReg.test(userPwd)){// 符合规则显示提示信息userPwdMsg.innerText OK;return true;}else{// 不符合规则显示提示信息userPwdMsg.innerText 用户名密码格式有误密码必须是六位数字;return false;}}
3.检验表单函数 // 校验表单函数function checkForm(){var flag1 checkUsername();var flag2 checkUserPwd();// 如果两个函数都返回true说明格式都正确可以提交表单return flag1 flag2;}
4.CSS样式 style.ht{text-align: center;color: cadetblue;font-family: 幼圆;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td{border: 1px solid powderblue;}.ipt{border: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width:60px;background-color: antiquewhite;}#usernameMsg , #userPwdMsg {color: gold}.buttonContainer{text-align: center;}/style
5.JavaScript代码 script// 校验账号格式function checkUsername(){// 定义正则表达式表示字符串规则var usernameReg /^[a-zA-Z0-9]{5,10}$/;// 获取用户名输入框的值var usernameInput document.getElementById(usernameInput);var username usernameInput.value;// 获取提示信息元素var usernameMsg document.getElementById(usernameMsg);// 判断用户名是否符合规则if(usernameReg.test(username)){// 符合规则返回true在页面上提示OKusernameMsg.innerText OK;return true;}else{// 不符合规则显示提示信息usernameMsg.innerText 用户名必须为5-10位字母、数字或下划线;// 格式有误时返回false阻止表单提交return false;}}// 校验密码是否符合规则的函数function checkUserPwd(){// 定义正则表达式表示字符串规则var userPwdReg /^[0-9]{6}$/;// 获取密码输入框的值var userPwdInput document.getElementById(userPwdInput);var userPwd userPwdInput.value;// 获得格式提示的框var userPwdMsg document.getElementById(userPwdMsg);// 判断密码是否符合规则if(userPwdReg.test(userPwd)){// 符合规则显示提示信息userPwdMsg.innerText OK;return true;}else{// 不符合规则显示提示信息userPwdMsg.innerText 用户名密码格式有误密码必须是六位数字;return false;}}// 校验表单函数function checkForm(){var flag1 checkUsername();var flag2 checkUserPwd();// 如果两个函数都返回true说明格式都正确可以提交表单return flag1 flag2;}/script
6.整体代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.ht{text-align: center;color: cadetblue;font-family: 幼圆;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td{border: 1px solid powderblue;}.ipt{border: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width:60px;background-color: antiquewhite;}#usernameMsg , #userPwdMsg {color: gold}.buttonContainer{text-align: center;}/stylescript// 校验账号格式function checkUsername(){// 定义正则表达式表示字符串规则var usernameReg /^[a-zA-Z0-9]{5,10}$/;// 获取用户名输入框的值var usernameInput document.getElementById(usernameInput);var username usernameInput.value;// 获取提示信息元素var usernameMsg document.getElementById(usernameMsg);// 判断用户名是否符合规则if(usernameReg.test(username)){// 符合规则返回true在页面上提示OKusernameMsg.innerText OK;return true;}else{// 不符合规则显示提示信息usernameMsg.innerText 用户名必须为5-10位字母、数字或下划线;// 格式有误时返回false阻止表单提交return false;}}// 校验密码是否符合规则的函数function checkUserPwd(){// 定义正则表达式表示字符串规则var userPwdReg /^[0-9]{6}$/;// 获取密码输入框的值var userPwdInput document.getElementById(userPwdInput);var userPwd userPwdInput.value;// 获得格式提示的框var userPwdMsg document.getElementById(userPwdMsg);// 判断密码是否符合规则if(userPwdReg.test(userPwd)){// 符合规则显示提示信息userPwdMsg.innerText OK;return true;}else{// 不符合规则显示提示信息userPwdMsg.innerText 用户名密码格式有误密码必须是六位数字;return false;}}// 校验表单函数function checkForm(){var flag1 checkUsername();var flag2 checkUserPwd();// 如果两个函数都返回true说明格式都正确可以提交表单return flag1 flag2;}/script
/head
bodyh1 classht欢迎使用日程管理系统/h1h3 classht请登录/h3form methodpost action/user/login onsubmitreturn checkForm()table classtab cellspacing0pxtr classltrtd请输入账号/tdtdinput classipt typetext idusernameInput nameusername onblurcheckUsername()span idusernameMsg classmsg/span/td/trtr classltrtd请输入密码/tdtdinput classipt typepassword nameuserPwd iduserPwdInput onblurcheckUserPwd()span iduserPwdMsg/span/td/trtr classltrtd colspan2 classbuttonContainerinput classbtn1 typesubmit value登录input classbtn1 typereset value重置button classbtn1a hrefregist.html去注册/a/button/td/tr/table/form
/body
/html
7.效果展示 二、注册页及校验
1.校验账号格式 // 验证账号格式function checkUsername(){var usernameReg /^[a-zA-Z0-9]{5,10}$/;var usernameInput document.getElementById(usernameInput) ;var username usernameInput.value;var usernameMsg document.getElementById(usernameMsg);if(!usernameReg.test(username)){usernameMsg.innerText 账号格式不正确;return false;}else{usernameMsg.innerText OK;return true;}}
2.校验密码格式 // 验证密码格式function checkUserPwd(){var userPwdReg /^\d{6}$/;// 获取密码输入框的值var userPwdInput document.getElementById(userPwdInput)var userPwd userPwdInput.value;// 获取密码提示信息var userPwdMsg document.getElementById(userPwdMsg);if(!userPwdReg.test(userPwd)){userPwdMsg.innerText 账号格式不正确;return false;}else{// 符合规则打印提示信息userPwdMsg.innerText OK;return true;}}
3.校验确认密码格式 // 验证确认密码function checkReUserPwd(){// 密码格式验证var userPwdReg /^\d{6}$/;// 再次输入的密码var reUserPwdInput document.getElementById(reUserPwdInput)var reUserPwd reUserPwdInput.value;var reUserPwdMsg document.getElementById(reUserPwdMsg);if(!userPwdReg.test(reUserPwd)){reUserPwdMsg.innerText 密码格式不正确;return false;}// 获得上次输入的密码var userPwdInput document.getElementById(userPwdInput)var userPwd userPwdInput.value;// 判断两次输入的密码是否一致if(reUserPwd ! userPwd){reUserPwdMsg.innerText 两次输入的密码不一致;return false;}else{reUserPwdMsg.innerText OK;return true;}}
4.验证表单函数 // 验证表单函数function checkForm(){var flag1 checkUsername();var flag2 checkUserPwd();var flag3 checkReUserPwd();return flag1 flag2 flag3;}
5.CSS样式 style.ht{text-align: center;color:cadetblue;font-family: 幼圆;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td{border: 1px solid powderblue;}.ipt{bottom: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width: 60px;background: antiquewhite;}.msg{color: gold;}.buttonContainer{text-align: center;}/style
6.JavaScript代码 script// 验证账号格式function checkUsername(){var usernameReg /^[a-zA-Z0-9]{5,10}$/;var usernameInput document.getElementById(usernameInput) ;var username usernameInput.value;var usernameMsg document.getElementById(usernameMsg);if(!usernameReg.test(username)){usernameMsg.innerText 账号格式不正确;return false;}else{usernameMsg.innerText OK;return true;}}// 验证密码格式function checkUserPwd(){var userPwdReg /^\d{6}$/;// 获取密码输入框的值var userPwdInput document.getElementById(userPwdInput)var userPwd userPwdInput.value;// 获取密码提示信息var userPwdMsg document.getElementById(userPwdMsg);if(!userPwdReg.test(userPwd)){userPwdMsg.innerText 账号格式不正确;return false;}else{// 符合规则打印提示信息userPwdMsg.innerText OK;return true;}}// 验证确认密码function checkReUserPwd(){// 密码格式验证var userPwdReg /^\d{6}$/;// 再次输入的密码var reUserPwdInput document.getElementById(reUserPwdInput)var reUserPwd reUserPwdInput.value;var reUserPwdMsg document.getElementById(reUserPwdMsg);if(!userPwdReg.test(reUserPwd)){reUserPwdMsg.innerText 密码格式不正确;return false;}// 获得上次输入的密码var userPwdInput document.getElementById(userPwdInput)var userPwd userPwdInput.value;// 判断两次输入的密码是否一致if(reUserPwd ! userPwd){reUserPwdMsg.innerText 两次输入的密码不一致;return false;}else{reUserPwdMsg.innerText OK;return true;}}// 验证表单函数function checkForm(){var flag1 checkUsername();var flag2 checkUserPwd();var flag3 checkReUserPwd();return flag1 flag2 flag3;}/script
7.整体代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.ht{text-align: center;color:cadetblue;font-family: 幼圆;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td{border: 1px solid powderblue;}.ipt{bottom: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width: 60px;background: antiquewhite;}.msg{color: gold;}.buttonContainer{text-align: center;}/stylescript// 验证账号格式function checkUsername(){var usernameReg /^[a-zA-Z0-9]{5,10}$/;var usernameInput document.getElementById(usernameInput) ;var username usernameInput.value;var usernameMsg document.getElementById(usernameMsg);if(!usernameReg.test(username)){usernameMsg.innerText 账号格式不正确;return false;}else{usernameMsg.innerText OK;return true;}}// 验证密码格式function checkUserPwd(){var userPwdReg /^\d{6}$/;// 获取密码输入框的值var userPwdInput document.getElementById(userPwdInput)var userPwd userPwdInput.value;// 获取密码提示信息var userPwdMsg document.getElementById(userPwdMsg);if(!userPwdReg.test(userPwd)){userPwdMsg.innerText 账号格式不正确;return false;}else{// 符合规则打印提示信息userPwdMsg.innerText OK;return true;}}// 验证确认密码function checkReUserPwd(){// 密码格式验证var userPwdReg /^\d{6}$/;// 再次输入的密码var reUserPwdInput document.getElementById(reUserPwdInput)var reUserPwd reUserPwdInput.value;var reUserPwdMsg document.getElementById(reUserPwdMsg);if(!userPwdReg.test(reUserPwd)){reUserPwdMsg.innerText 密码格式不正确;return false;}// 获得上次输入的密码var userPwdInput document.getElementById(userPwdInput)var userPwd userPwdInput.value;// 判断两次输入的密码是否一致if(reUserPwd ! userPwd){reUserPwdMsg.innerText 两次输入的密码不一致;return false;}else{reUserPwdMsg.innerText OK;return true;}}// 验证表单函数function checkForm(){var flag1 checkUsername();var flag2 checkUserPwd();var flag3 checkReUserPwd();return flag1 flag2 flag3;}/script
/head
bodyh1 classht欢迎使用日程管理系统/h1h3 classht请注册/h3form methodpost action/user/regist onsubmitreturn checkForm()table classtab cellspacing0pxtr classltrtd请输入账号/tdtdinput classipt typetext nameusername idusernameInput onblurcheckUsername()span idusernameMsg classmsg/span/td/trtr classltrtd请输入密码/tdtdinput classipt typepassword nameuserPwd iduserPwdInput onblurcheckUserPwd()span iduserPwdMsg classmsg/span/td/trtr classltrtd确认密码/tdtdinput typepassword classipt idreUserPwdInput onblurcheckReUserPwd()span idreUserPwdMsg classmsg/span/td/trtr classltrtd colspan2 classbuttonContainerinput typesubmit classbtn1 value注册input typereset classbtn1 value重置button classbtn1a hreflogin.html去登陆/a/button/td/tr/table/form
/body
/html
8.效果展示
