10 表单验证PHP动态网站开发项目教程课件

项目1会员管理系统任务7表单验证成都职业技术学院软件学院主讲教师：牟奇春前端表单验证的重要性我们在任务6中，简单判断了一下用户名是否填写，并判断了密码和确认密码是否相同。在实际项目开发中，这远远不够。可以这样讲，任何表单，在数据提交到后端之前，都应该进行数据的验证，确保数据的合法有效。前端表单验证的重要性数据的验证，需要在前端和后端同时进行，这样做的目的是为了保证系统的安全，减轻服务器压力。比如，用户明明没有填写用户名，还是去点击提交按钮，这显然是没有意义的。如果在前端不进行判断和处理，这一次无效的交互，仍然要占用服务器的时间。另外，我们后端主要是使用SQL语句和数据库进行交互，如果前端不加以限制，可能会输入一些危险字符，引入SQL注入风险。关于SQL注入的相关内容，大家可以参阅以下链接：表单验证的内容在前端进行数据验证，我们一般是使用javaScript来进行数据的验证。为了避免前端绕过javaScript，在后端接收到数据后，还需要再一次的进行验证。在会员注册表单中，需要验证的内容有：用户名：必填，只能是大小写字符、数字，长度为3-10。密码：必填，只能是大小写字符、数字、_、*，长度为6-10。确认密码：必填，且必须和密码保持一致。信箱：格式必须正确，可以不填。爱好：可以不选。表单验证的方法在单击“提交”按钮时，要拦截系统提交，先验证数据，合格后再提交表单。只需要在form标签中添加一个onsubmit的事件即可实现提交拦截：表单验证的方法当我们点击提交按钮时，会触发提交事件，系统会首先跳转至javaScript方法check，如果check返回为真，则系统继续提交，如果返回为假，则阻止提交。具体的check方法代码如下：前端表单验证的具体代码前端表单验证的具体代码首先，我们用document.getElementsByName读取名字为'username'的元素，这样就得到一个数组。但我们整个页面中，只有一个username的元素，因此，我们取此数组的第一个元素，然后读取其value属性即可得到用户输入的用户名，再使用trim方法，去除前面的空格。其他几个数据的读取方式也就是一样的原理。接下来，我们使用了正则表达式来判断数据的内容。前端表单验证的具体代码用户名的验证：/^[a-zA-Z0-9]{3,10}$/，表示只允许大写和小写字母、数字，长度范围是3-10。使用test方法进行正则测试，如果返回真，则说明测试通过。如果返回假，则说明测试有误，此时就会弹窗提示错误，并返回false，阻止表单的自动提交。前端表单验证的具体代码密码的验证：/^[a-zA-Z0-9_*]{6,10}$/，表示只允许大小写字母、数字和*，长度范围是6-10。邮箱的验证：/^[a-zA-Z0-9_\-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/，这个内容复杂一点，大家可以自己理解一下。后端表单验证的具体代码在后端，一般使用php中的内置函数和正则表达式来进行表单数据的验证。总结本次课程，我们学习了如何使用正则表达式在前端js中以及后