关于输入框的值
来源:互联网 发布:三国志11画质优化补丁 编辑:程序博客网 时间:2024/06/05 09:40
最近在做一个简单的注册页面,其中有用户名,帐户(通过邮箱注册),设置密码和密码的确认,还有注册的身份。在用户进行输入邮箱时,我们就需要检验用户输入的邮箱格式是否是正确,如果不正确我们就需要提示用户输入格式的错误,在确认密码的过程中就是再一次输入设置的密码,同时我们也要检验重新输入的密码是否与设置密码时输入的密码一样,不一样时就要提示用户确认的密码与设置的密码不一致。
我先贴一下我的代码(js部分):
1、检验邮箱的格式:function mail(){
var mail=document.getElementById("account");//id为input的,获取input这个节点
var re=/^[\w-]+(\.[\w]+)*@([\w-]+\.)+[a-zA-z]{2,7}$/;//正则表达式,邮箱格式
//邮箱内容为空
if(mail.value==""){
var child=mail.parentNode.lastChild;
if(child.innerHTML!="邮箱不能为空"||child.innerHTML=="邮箱格式不正确")
{
if(child.innerHTML=="邮箱格式不正确"){
mail.parentNode.removeChild(child);
}
var newNode=document.createElement("small");
newNode.innerHTML="邮箱不能为空";
newNode.style.color="red";
mail.parentNode.appendChild(newNode);
}
}
//不符合邮箱格式
else if(!mail.value.match(re)){
var child=mail.parentNode.lastChild;
if(child.innerHTML!="邮箱格式不正确"||child.innerHTML=="邮箱不能为空")
{
if(child.innerHTML=="邮箱不能为空"){
mail.parentNode.removeChild(child);//如果已经插入了提示用户的语句就把它删除重新插入一个提示语句
}
var newNode=document.createElement("small");
newNode.innerHTML="邮箱格式不正确";
newNode.style.color="red";
mail.parentNode.appendChild(newNode);
}
}
}
2、确认密码:
(1)//检测是否在设置密码后确认密码
function putPassword(){
var password1=document.getElementById("password");
var password2=document.getElementById("confirmPassword");
var child=password2.parentNode.lastChild;
if(password1.value==""){
if(child.innerHTML!="请先设置密码"){
if(child.innerHTML=="密码不一致"){
password2.parentNode.removeChild(child);
}
var newNode=document.createElement("small");
newNode.innerHTML="请先设置密码";
newNode.style.color="red";
password2.parentNode.appendChild(newNode);
}
}
}
(2)//检验再次输入的密码是否与第一次相同
function funpassword(){
var password1=document.getElementById("password");
var password2=document.getElementById("confirmPassword");
var child=password2.parentNode.lastChild;
if(password1.value==password2.value&&password1.value!=""){
if(child.innerHTML=="密码不一致"||child.innerHTML=="请先设置密码"){
password2.parentNode.removeChild(child);
}
}
if(password1.value!=password2.value&&password1.value!=""){
if(child.innerHTML=="密码不一致"||child.innerHTML=="请先设置密码"){
password2.parentNode.removeChild(child);
}
var newNode=document.createElement("small");
newNode.innerHTML="密码不一致";
newNode.style.color="red";
password2.parentNode.appendChild(newNode);
}
}
(html部分)1、<input type="text" id="account" placeholder="邮箱" onblur ="mail()">//input 需要一个鼠标事件,当鼠标点击输入框后离开就会触发mail()事件的发生。
2、<input type="password" name="confirmPassword" id="confirmPassword" placeholder="再次输入密码" onblur="funpassword()" onmousedown="putPassword()">//当鼠标在确认密码框点击的时候就会触发检验设置密码框是否为空的事件。
注意:获取input的值时需要使用document.getElementById(id).value;使用value属性。在获取其他元素的值时需要使用innerHTML属性,该属性也可以进行元素内容的设置。
下面是效果图:
- 关于输入框的值
- 关于输入框的光标
- 关于输入框可输入字符的限定小结
- 关于EditText文本输入框输入类型的限制
- 前端关于输入框的写法
- 关于Javascript校验输入的种种值
- input输入框输入完成判断输入的值
- 关于iterm的中文输入
- 关于输入缓存的问题
- 关于命令行输入的控制
- 关于用户输入的安全问题
- 关于用户界面输入的验证
- 关于double的输入格式
- 关于C 的输入格式
- 关于cin输入的问题
- 关于测试数据的输入问题
- 关于 PHP 的标准输入
- 关于数据输入的问题
- solr 打分公式(转载地址:http://www.cnblogs.com/rcfeng/)
- leetcode
- 点击遮罩层没有内容的地方进行隐藏
- Android Studio 2.3以上版本新建项目和导入项目配置讲解
- [乱搞 思路题] BZOJ 2722 [Violet 5]爱的花环
- 关于输入框的值
- Caffe学习(4)——caffe中的激活层及对应参数
- 【图像处理】JPEG Tags
- RabbitMQ使用场景
- leetcode
- PAT 1126
- Mybatis类型转换TypeHandler介绍
- 程序调用ShellExecuteEx打开其他程序(兼容UAC获取管理员权限)
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单