一个html页面中怎么添加文本框?

一个html页面中怎么添加文本框?,第1张

文本框 :<input id="_text" type="text" value="这里是文本框的内容" />

按钮:<input type="button" value="提交" onclick="alert(document.getElementById('_text').value)" />

<script>

function addNumber(everyone)

{

document.getElementById("text1").value += everyone

}

</script><input type="button" onclick="addNumber(1)" value= "1"></input><input type="text" id="text1"></input><input type="button" onclick="addNumber(2)" value= "2"></input>

可以用定位来做啊,

style:

.search { position:relativewidth: 462px}

.search .searchText { border: 1px solid #dddwidth: 346pxline-height: 32pxheight: 32pxpadding: 0 5pxcolor: #333}

.search .searchButton { position:absoluteright:50pxbackground: url(../images/sliced.gif) -251px 0 no-repeatwidth: 80pxheight: 32px text-indent: -9999pxborder:none}

html:

<div class="search fl">

<form action="#">

<input class="searchText" type="text" value="请输入搜索关键字" onfocus="if(this.value=='请输入搜索关键字')this.value=''" onblur="if(this.value=='')this.value='请输入搜索关键字'"/>

<input class="searchButton" type="button" value="搜索" />

</form>

<div class="clear"></div>

</div>

用js做一个正则表达式验证。、

1. /^$/ 这个是个通用的格式。

^ 匹配输入字符串的开始位置;$匹配输入字符串的结束位置

2. 里面输入需要实现的功能。

* 匹配前面的子表达式零次或多次;

+ 匹配前面的子表达式一次或多次;

?匹配前面的子表达式零次或一次;

\d 匹配一个数字字符,等价于[0-9]

注意,先将jquery库引入到页面,下面是用js的jq库做的验证

checkUserNameflag=false

checkPasswordflag=false

checkPasswordAgianflag=false

checkEmailflag=false

// 用户名校验

function checkUserName() {

var username = $("userNeme").value

var zz = /^[A-Za-z0-9]{6,}$/

if (!zz.test(username)) {

$("userName_warn").innerHTML = " × 用户名不符合规范"

checkUserNameflag=false

} else {

/*$("userName_warn").style.color='blue'

$("userName_warn").innerHTML = "√ 用户名可用"*/

showUserExist(username)

checkUserNameflag=true

}

}

//重置提示

function resetWarn(){

$("userName_warn").innerHTML=""

$("email_warn").innerHTML=""

$("password_warn").innerHTML=""

$("Repassword_warn").innerHTML=""

}

// 密码校验

function checkPassword() {

var password1 = $("password").value

if (password1.length >= 6 &&password1.length <= 15) {

checkPasswordflag = true

$("password_warn").style.color='blue'

$("password_warn").innerHTML = " √ 密码可用 "

checkAgianMiMa()

} else {

checkPasswordflag = false

$("password_warn").innerHTML = " × 密码至少为 6 个字符 "

}

}

function checkPasswordAgian() {

var password1 = $("password").value

var password2 = $("rePassword").value

if (password1 == password2) {

if (password1 == "") {

$("Repassword_warn").innerHTML = " × 请输入密码 "

checkPasswordAgianflag = false

return

}

$("Repassword_warn").style.color='blue'

$("Repassword_warn").innerHTML = "√ 重复输入密码正确"

checkPasswordAgianflag = true

} else {

checkPasswordAgianflag = false

$("Repassword_warn").innerHTML = " × 两次密码输入不同 "

}

}

function checkEmail(){

//对电子邮件的验证

var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/

var email=$("email").value

if(!myreg.test(email)){

checkEmailflag=false

$("email_warn").style.color='red'

$("email_warn").innerHTML = " × 邮箱格式不符合规范"

} else {

checkEmailflag=true

$("email_warn").style.color='blue'

$("email_warn").innerHTML = "√ 邮箱格式正确"

}

}

function submitCheck(){

alert(checkUserNameflag)

if(checkUserNameflag==false || checkPasswordflag==false || checkPasswordflag==false

||checkPasswordAgianflag==false || checkEmailflag==false){

return

}

}

function $(id){

return document.getElementById(id)

}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7028386.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存