用JS和JQuery实现的效果是一样的。
HTML代码
& lt; legend>请填写注册信息& lt;/legend>
action=& lt;形式”指数。html”方法=" post "比;
& lt;表比;
& lt; tr>
& lt; td>用户名:& lt;/td>
& lt; td> & lt;输入类型=拔谋尽眓ame="用户名"占位符=庇捎⑽淖帜负褪肿槌傻?-16位字符,以字母开头”在
& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>昵称:& lt;/td>
& lt; td> & lt;输入类型=拔谋尽眓ame="昵称"占位符=庇? - 6个汉字组成“比;
& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>邮箱:& lt;/td>
& lt; td> & lt;输入类型=拔谋尽眓ame="电子邮件"占位符=坝氏湔撕臔域名。如good@tom.com, whj@sina.com.cn”比;
& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>密码:& lt;/td>
& lt; td> & lt;输入类型=懊苈搿眓ame=" pwd "占位符=庇捎⑽淖帜负褪肿槌傻氖蛔址北?
& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>确认密码:& lt;/td>
& lt; td> & lt;输入类型=懊苈搿眓ame=" pwd2 "占位符=叭啡厦苈搿北?
& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>手机号码:& lt;/td>
& lt; td> & lt;输入类型=拔谋尽眓ame="电话"占位符=笆只庞?1位数字组成,且以13日,15日,18日开头”在
& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>出生日期:& lt;/td>
& lt; td> & lt;输入类型=拔谋尽眓ame="日期"占位符=背錾掌谠?990 - 2009年之间“比;
& lt;/tr>
& lt; tr>
& lt; td colspan=" 2 "=白蟆倍云胱４? lt;输入类型=鞍磁ァ钡拿?疤峤弧眝alue=" https://www.yisu.com/zixun/提交“祝辞& lt;/td>
& lt;/tr>
& lt;/table>
& lt;/form>
& lt;/fieldset>
CSS样式
身体{
text-align:中心;
填充:0;
保证金:0;
}
自定义字段{
宽度:800 px;
}
表tr td ~ td {
text-align:左;
宽度:600 px;
}
JS代码
//验证用户名
函数check_userName () {
var用户名=. getelementbyid(“名字”)value;
var regName=/[a-zA-Z] \ w {4、16}/如果用户名==" | | userName.trim ()==" ") {
. getelementbyid (“err_name”)。innerHTML="请输入用户名”;
返回错误;
}else if (! regName.test(用户名)){
. getelementbyid (“err_name”)。innerHTML="由英文字母和数字组成的4-16位字符,以字母开头”;
返回错误;
其他}{
. getelementbyid (“err_name”)。innerHTML=" ok ! ! !”;
返回true;
}
}//验证昵称
函数check_nickName () {
var昵称=. getelementbyid(“尼克”)value;
var regName=/[\ u4e00 - \ u9fa5] {2,6}/如果(昵称==" " | | nickName.trim ()==" ") {
. getelementbyid (“err_nick”)。innerHTML="请输入昵称”;
返回错误;
}else if (! regName.test(昵称)){
. getelementbyid (“err_nick”)。innerHTML="由2 - 6个汉字组成”;
返回错误;
其他}{
. getelementbyid (“err_nick”)。innerHTML=" ok ! ! !”;
返回true;
}
}//验证邮箱
函数check_email () {
var邮件=. getelementbyid(“电子邮件”)value;
var regEmail=/^ \ w + @ \ w + ((\ \ w +) +)/美元;
如果(电子邮件==" " | | email.trim ()==" ") {
. getelementbyid (“err_email”)。innerHTML="请输入邮箱”;
返回错误;
}else if (! regEmail.test(电子邮件)){
. getelementbyid (“err_email”)。innerHTML="邮箱账号@域名。如good@tom.com, whj@sina.com.cn”;
返回错误;
其他}{
. getelementbyid (“err_email”)。innerHTML=" ok ! ! !”;
返回true;
}
}//验证密码
函数check_pwd () {
var pwd=. getelementbyid (pwd) value;
var regPwd=/^ \ w {10} 4 $/;
如果(pwd==" " | | pwd.trim ()==" ") {
. getelementbyid (“err_pwd”)。innerHTML="请输入密码”;
返回错误;
}else if (! regPwd.test (pwd)) {
. getelementbyid (“err_pwd”)。innerHTML="格式错误”;
返回错误;
其他}{
. getelementbyid (“err_pwd”)。innerHTML=" ok ! ! !”;
返回true;
}
}//确认密码
函数check_pwd2 () {
var pwd=. getelementbyid (pwd) value;
var pwd2=. getelementbyid (“pwd2”) value;
如果(pwd2==" " | | pwd2.trim ()==" ") {
. getelementbyid (“err_pwd2”)。innerHTML="请输入密码”;
返回错误;
}else if (! pwd2.equals (pwd)) {
. getelementbyid (“err_pwd2”)。innerHTML="两次输入密码不一致”;
返回错误;
其他}{
. getelementbyid (“err_pwd2”)。innerHTML=" ok ! ! !”;
返回true;
}
}//验证手机号
函数check_phone () {
var电话=. getelementbyid(电话)value;
var regPhone=/[18] 13日15日\ d {9}/;
如果(电话==" " | | phone.trim ()==" ") {
. getelementbyid (“err_phone”)。innerHTML="请输入手机号”;
返回错误;
}else if (! regPhone.test(手机)){
. getelementbyid (“err_phone”)。innerHTML="手机号由11位数字组成,且以13日,15日,18日开头”;
返回错误;
其他}{
. getelementbyid (“err_phone”)。innerHTML=" ok ! ! !”;
返回true;
}
}//验证时间
函数check_date () {
var生日=. getelementbyid(“生日”)value;
var regDate=/[18] 13日15日\ d {9}/;
如果(生日==" " | | birthday.trim ()==" ") {
. getelementbyid (“err_date”)。innerHTML="请输入日期”;
返回错误;
}else if (! regDate.test(生日)){
. getelementbyid (“err_date”)。innerHTML="出生日期在1990 - 2009年之间”;
返回错误;
其他}{
. getelementbyid (“err_date”)。innerHTML=" ok ! ! !”;
返回true;
}
}
