java如何做表单校验_javascript表单校验

JavaScript登录注册账户名密码邮箱等用正则表达式校验。

直接上代码 如果有解释不对的地方，或者错误的地方，请留言。 其中正则表达式具体的根据自己的需求更换

Title

因为校验的基本流程一样 所以抽取一个函数来专门校验输入的对错。

function check(username,regex,spanId,sucessInfo,errorInfo) {

定义一个flag变量用来记录校验结果是true还是false

var flag;

获取要校验的标签里输入的值

var val = document.getElementsByName(username)[0].value;

获取要操作span标签 用来写入返回给正确和错误信息。

var span = document.getElementById(spanId);

判断页面标签内输入的内容是否符合正则的规则，如果符合，返回true 反之返回false。

用flag记录 返回flag 作为函数的返回值。

if (regex.test(val)) {

正确的时候

span.innerHTML = sucessInfo.fontcolor("red");

flag = true;

} else {

错误的时候

span.innerHTML = errorInfo.fontcolor("red");

flag = false;

}

return flag;

}

定义一个失去焦点的函数user去校验账号是否符合规则。

function user() {

var regex = /^\w+@\w+(\.\w+)+$/i;

返回一个正确为true 或者错误为false的返回值

return check("username",regex,"userspan","用户名正确","用户名错误");

}

function pass() {

var regex =/^[\d*\w*@_-]{5,12}$/;

返回一个正确为true 或者错误为false的返回值

return check("psw",regex,"pswspan","密码正确","密码错误");

}

接着就是随意扩展 添加组件去改变正则表达式和给check函数的传值即可

定义一个form表单的onsubmit函数。返回true或false

因为onsubmit的返回值如果是true 则会提交表单 否则不提交

function chekform() {

当两个函数返回值都是true时 chekform函数返回true 反之为false。

if(user() && pass()){

return true;

}else {

return false;

}

}

邮箱账号:

密码:

校验了账户密码的状态

点击提交按钮之后地址栏中的数据