用html来操作css样式 正则表达式

操作元素的CSS样式:用style来表示


正则表达式:

/*
正则表达式的创建方式:
""
方式1:
/正则表达式/模式
方式2:
new RegExp("正则表达式",模式);
正则表达式对象常用的方法:
test()  使用正则对象去匹配字符串  如果匹配成功返回ture,否则返回false.
exec()  根据正则表达式去查找字符串符合规则的内容。
模式:
g (全文查找出现的所有 pattern)
i (忽略大小写)


姓名和邮箱后面都显示了正确


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的注册页面示例,使用 HTMLCSS 和 JavaScript,并使用正则表达式验证输入的邮箱和密码格式。 HTML: ```html <!DOCTYPE html> <html> <head> <title>注册页面</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* 居中显示 */ html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; } /* 表单样式 */ form { display: flex; flex-direction: column; align-items: center; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } input[type="text"], input[type="password"] { margin: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; width: 300px; } input[type="submit"] { margin: 20px; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } input[type="submit"]:hover { background-color: #3e8e41; } /* 错误提示信息 */ .error { color: red; font-size: 14px; margin-top: -10px; } </style> </head> <body> <form id="register-form"> <label for="email">邮箱:</label> <input type="text" id="email" name="email" required> <span class="error" id="email-error"></span> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <span class="error" id="password-error"></span> <input type="submit" value="注册"> </form> <script src="index.js"></script> </body> </html> ``` CSS: 上面的 HTML 中包含了一些 CSS 样式,用于设置页面布局和表单样式。 JavaScript: ```javascript // 获取表单元素和错误提示元素 const form = document.getElementById('register-form'); const email = document.getElementById('email'); const emailError = document.getElementById('email-error'); const password = document.getElementById('password'); const passwordError = document.getElementById('password-error'); // 邮箱验证正则表达式 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 密码验证正则表达式 const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/; // 表单提交事件 form.addEventListener('submit', function(event) { // 阻止默认提交行为 event.preventDefault(); // 验证邮箱格式 if (!emailRegex.test(email.value)) { emailError.textContent = '请输入有效的邮箱地址'; return; } // 清除错误提示 emailError.textContent = ''; // 验证密码格式 if (!passwordRegex.test(password.value)) { passwordError.textContent = '密码要求至少8个字符,包括至少一个小写字母、一个大写字母和一个数字'; return; } // 清除错误提示 passwordError.textContent = ''; // 表单验证通过,可以提交了 alert('注册成功!'); }); ``` 以上代码实现了一个简单的注册页面,当用户填写邮箱和密码并点击注册按钮时,会使用正则表达式验证邮箱和密码格式。如果格式不正确,则会在对应的输入框下方提示错误信息,阻止表单提交。如果格式正确,则弹出一个注册成功的提示框。 注意:以上代码只是一个示例,实际项目中可能需要更复杂的表单验证逻辑和更完善的错误提示信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值