一个简单的javascript 填写个人信息的 当所有信息填写完成且正确的时候，点击按钮在textarea中显示 怎显示 10
展开全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎进入注册页面</title>
<script language="javascript">
function checkname(){
var div = document.getElementById("div1");
div.innerHTML = "";
var name1 = document.form1.text1.value;
if (name1 == "") {
div.innerHTML = "<font color=red font-size='100px'>姓名不能为空！</font>";
document.form1.text1.focus();
return false;
}
if (name1.length < 4 || name1.length > 16) {
div.innerHTML = "<font color=red>姓名输入的长度4-16个字符！</font>";
document.form1.text1.select();
return false;
}
return true;
}
function checkpassword(){
var div = document.getElementById("div2");
div.innerHTML = "";
var password = document.form1.text2.value;
if (password == "") {
div.innerHTML = "<font color=red>密码不能为空！</font>";
document.form1.text2.focus();
return false;
}
if (password.length < 4 || password.length > 12) {
div.innerHTML = "<font color=red>密码长度4-12位</font>";
document.form1.text2.select();
return false;
}
return true;
}
function checkrepassword(){
var div = document.getElementById("div3");
div.innerHTML = "";
var password = document.form1.text2.value;
var repass = document.form1.text3.value;
if (repass == "") {
div.innerHTML = "<font color=red>密码不能为空！</font>";
document.form1.text3.focus();
return false;
}
if (password != repass) {
div.innerHTML = "<font color=red>输入密码和确认密码长度不一致</font>";
document.form1.text3.select();
return false;
}
return true;
}
function checkEmail(){
var div = document.getElementById("div4");
div.innerHTML = "";
var email = document.form1.text4.value;
var sw = email.indexOf("@", 0);
var sw1 = email.indexOf(".", 0);
var tt = sw1 - sw;
if (email.length == 0) {
div.innerHTML = "<font color=red>电子邮件不能为空</font>";
document.form1.text4.focus();
return false;
}
if (email.indexOf("@", 0) == -1) {
div.innerHTML = "<font color=red>电子邮件格式不正确，必须包含@符号！</font>";
document.form1.text4.select();
return false;
}
if (email.indexOf(".", 0) == -1) {
div.innerHTML = "<font color=red>电子邮件格式不正确，必须包含.符号！</font>";
document.form1.text4.select();
return false;
}
if (tt == 1) {
div.innerHTML = "<font color=red>邮件格式不对。@和.不可以挨着！</font>";
document.form1.text4.select();
return false;
}
if (sw > sw1) {
div.innerHTML = "<font color=red>电子邮件格式不正确，@符号必须在.之前</font>";
document.form1.text4.select();
return false;
}
else {
return true;
}
return ture;
}
function checkPhone(){
var div = document.getElementById("div5");
div.innerHTML = "";
var phone = document.form1.text5.value;
if (phone == "") {
div.innerHTML = "<font color=red>手机号不能为空！</font>";
document.form1.text5.focus();
return false;
}
if (phone.length == 11) {
div.innerHTML = "<font color=red>手机号码只能为11个字符！</font>";
document.form1.text5.select();
return false;
}
return true;
}
function check(){
if (checkname() && checkpassword() && checkrepassword() && checkEmail()&&checkPhone()) {
var a = document.form1.text1.value;
var b = document.form1.text2.value;
var c = document.form1.text4.value;
var d = document.form1.text5.value;
var e = document.form1.text6.value;
document.getElementById("textarea").value=a+","+b+","+c+","+d+","+e;
return true;
}
else {
return false;
}
}
</script>
</head>
<body>
<form name="form1" onSubmit="return check()">
<table border="0" align="center">
<tr>
<td>
<div align="right">用户名：</div></td>
<td>
<input id="text1" type="text" name="text1" onBlur="check()">
<div id="div1" style="display:inline;"> </div> </td>
</tr>
<tr>
<td>
<div align="right">密码： </div></td>
<td>
<input id="text2" type="password" name="text2" onBlur="check()">
<div id="div2" style="display:inline"> </div> </td>
</tr>
<tr>
<td>
<div align="right">确认密码： </div></td>
<td>
<input id="text3" type="password" name="text3" onBlur="check()">
<div id="div3" style="display:inline"> </div> </td>
</tr>
<tr>
<td>
<div align="right">电子邮件地址： </div></td>
<td>
<input id="text4" type="text" name="text4" onBlur="check()">
<div id="div4" style="display:inline"> </div> </td>
</tr>
<tr>
<td>
<div align="right">手机号码： </div></td>
<td>
<input id="text5" type="text" name="text5" onBlur="check()">
<div id="div5" style="display:inline"> </div> </td>
</tr>
<tr align="center">
<td><div align="right">学历：</div></td>
<td><div align="left">
<select name="text6">
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="中专">中专</option>
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
</div></td>
</tr>
<tr align="center">
<td align="center"><div align="right">兴趣爱好：</div></td>
<td align="center">
<input type="checkbox" name="text11" value="篮球">
篮球
<input type="checkbox" name="checkbox12" value="音乐">
音乐
<input type="checkbox" name="checkbox13" value="足球">
足球
<input type="checkbox" name="checkbox14" value="其他">
其他</td>
</tr>
<tr align="center">
<td align="center"><input type="submit" value="提交" name="text8">
<input type="reset" value="重置" name="text9"></td>
<td align="center"> </td>
</tr>
</table>
<textarea id="textarea" style=" margin-left:600"></textarea>
</form>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎进入注册页面</title>
<script language="javascript">
function checkname(){
var div = document.getElementById("div1");
div.innerHTML = "";
var name1 = document.form1.text1.value;
if (name1 == "") {
div.innerHTML = "<font color=red font-size='100px'>姓名不能为空！</font>";
document.form1.text1.focus();
return false;
}
if (name1.length < 4 || name1.length > 16) {
div.innerHTML = "<font color=red>姓名输入的长度4-16个字符！</font>";
document.form1.text1.select();
return false;
}
return true;
}
function checkpassword(){
var div = document.getElementById("div2");
div.innerHTML = "";
var password = document.form1.text2.value;
if (password == "") {
div.innerHTML = "<font color=red>密码不能为空！</font>";
document.form1.text2.focus();
return false;
}
if (password.length < 4 || password.length > 12) {
div.innerHTML = "<font color=red>密码长度4-12位</font>";
document.form1.text2.select();
return false;
}
return true;
}
function checkrepassword(){
var div = document.getElementById("div3");
div.innerHTML = "";
var password = document.form1.text2.value;
var repass = document.form1.text3.value;
if (repass == "") {
div.innerHTML = "<font color=red>密码不能为空！</font>";
document.form1.text3.focus();
return false;
}
if (password != repass) {
div.innerHTML = "<font color=red>输入密码和确认密码长度不一致</font>";
document.form1.text3.select();
return false;
}
return true;
}
function checkEmail(){
var div = document.getElementById("div4");
div.innerHTML = "";
var email = document.form1.text4.value;
var sw = email.indexOf("@", 0);
var sw1 = email.indexOf(".", 0);
var tt = sw1 - sw;
if (email.length == 0) {
div.innerHTML = "<font color=red>电子邮件不能为空</font>";
document.form1.text4.focus();
return false;
}
if (email.indexOf("@", 0) == -1) {
div.innerHTML = "<font color=red>电子邮件格式不正确，必须包含@符号！</font>";
document.form1.text4.select();
return false;
}
if (email.indexOf(".", 0) == -1) {
div.innerHTML = "<font color=red>电子邮件格式不正确，必须包含.符号！</font>";
document.form1.text4.select();
return false;
}
if (tt == 1) {
div.innerHTML = "<font color=red>邮件格式不对。@和.不可以挨着！</font>";
document.form1.text4.select();
return false;
}
if (sw > sw1) {
div.innerHTML = "<font color=red>电子邮件格式不正确，@符号必须在.之前</font>";
document.form1.text4.select();
return false;
}
else {
return true;
}
return ture;
}
function checkPhone(){
var div = document.getElementById("div5");
div.innerHTML = "";
var phone = document.form1.text5.value;
if (phone == "") {
div.innerHTML = "<font color=red>手机号不能为空！</font>";
document.form1.text5.focus();
return false;
}
if (phone.length == 11) {
div.innerHTML = "<font color=red>手机号码只能为11个字符！</font>";
document.form1.text5.select();
return false;
}
return true;
}
function check(){
if (checkname() && checkpassword() && checkrepassword() && checkEmail()&&checkPhone()) {
var a = document.form1.text1.value;
var b = document.form1.text2.value;
var c = document.form1.text4.value;
var d = document.form1.text5.value;
var e = document.form1.text6.value;
document.getElementById("textarea").value=a+","+b+","+c+","+d+","+e;
return true;
}
else {
return false;
}
}
</script>
</head>
<body>
<form name="form1" onSubmit="return check()">
<table border="0" align="center">
<tr>
<td>
<div align="right">用户名：</div></td>
<td>
<input id="text1" type="text" name="text1" onBlur="check()">
<div id="div1" style="display:inline;"> </div> </td>
</tr>
<tr>
<td>
<div align="right">密码： </div></td>
<td>
<input id="text2" type="password" name="text2" onBlur="check()">
<div id="div2" style="display:inline"> </div> </td>
</tr>
<tr>
<td>
<div align="right">确认密码： </div></td>
<td>
<input id="text3" type="password" name="text3" onBlur="check()">
<div id="div3" style="display:inline"> </div> </td>
</tr>
<tr>
<td>
<div align="right">电子邮件地址： </div></td>
<td>
<input id="text4" type="text" name="text4" onBlur="check()">
<div id="div4" style="display:inline"> </div> </td>
</tr>
<tr>
<td>
<div align="right">手机号码： </div></td>
<td>
<input id="text5" type="text" name="text5" onBlur="check()">
<div id="div5" style="display:inline"> </div> </td>
</tr>
<tr align="center">
<td><div align="right">学历：</div></td>
<td><div align="left">
<select name="text6">
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="中专">中专</option>
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
</div></td>
</tr>
<tr align="center">
<td align="center"><div align="right">兴趣爱好：</div></td>
<td align="center">
<input type="checkbox" name="text11" value="篮球">
篮球
<input type="checkbox" name="checkbox12" value="音乐">
音乐
<input type="checkbox" name="checkbox13" value="足球">
足球
<input type="checkbox" name="checkbox14" value="其他">
其他</td>
</tr>
<tr align="center">
<td align="center"><input type="submit" value="提交" name="text8">
<input type="reset" value="重置" name="text9"></td>
<td align="center"> </td>
</tr>
</table>
<textarea id="textarea" style=" margin-left:600"></textarea>
</form>
</body>
</html>
更多追问追答
追问
这。。新手表示不懂 你说点击提交 在文本框出现填写内容的 关键部分的语法是。。
追答
帮你改了下
你这修改下
function check(){
///这里就是关键的地方
var a = document.form1.text1.value; //获取用户输入的值
var b = document.form1.text2.value;
var c = document.form1.text4.value;
var d = document.form1.text5.value;
//然后把这些值显示在textarea
document.getElementById("textarea").value=a+","+b+","+c+","+d;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);//选中dom对象
}
function showMsg()//选取其中的值，并显示
{
var userName=$("txtUserName").value;
var age=$("txtAge").value;
$("txtAreaMsg").value="用户名:"+userName+"\n年龄:"+age
}
</script>
</head>
<body>
用户名：<input type="text" id="txtUserName"/><br>
年 龄：<input type="text" id="txtAge"/><br>
<input type="button" value="显示" onclick="showMsg()"/><br>
<textarea cols=10 rows=10 id="txtAreaMsg"></textarea>
</body>
</html>
给你说个简单点的，只要理解了原理，剩下的就好解决了
<head>
<title> New Document </title>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);//选中dom对象
}
function showMsg()//选取其中的值，并显示
{
var userName=$("txtUserName").value;
var age=$("txtAge").value;
$("txtAreaMsg").value="用户名:"+userName+"\n年龄:"+age
}
</script>
</head>
<body>
用户名：<input type="text" id="txtUserName"/><br>
年 龄：<input type="text" id="txtAge"/><br>
<input type="button" value="显示" onclick="showMsg()"/><br>
<textarea cols=10 rows=10 id="txtAreaMsg"></textarea>
</body>
</html>
给你说个简单点的，只要理解了原理，剩下的就好解决了
追问
$什么意思
追答
$为函数的名称，这样可以使代码模块化，减少输入不必要重复的代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
